Copyright: This help file created   Thu Apr 13 12:48:54 2000. Copyright © 2000 SoftQuad Software Inc.
Citation: This information Copyright © 2000 SoftQuad Software Inc.


Introduction to HoTMetaL PRO

The HoTMetaL interface

Editing basics

Inserting links

Publishing to a site

Managing your Website

Coding guidelines for Miva files

Manipulating your text

Using the Resource Manager

Working with images

Working with tables

Editing HTML markup

Working with forms

Creating frames

Maintaining your Website

Objects, applets, and scripts

Setting CSS Styles

Customizing HoTMetaL

Using macros

Shortcut keys

Glossary

Glossary


Introduction to HoTMetaL PRO

Welcome to HoTMetaL PRO 6.0 Evaluation Version!

HoTMetaL PRO is an editor and site management tool that enables you to make leading-edge Websites to put on the World Wide Web or an intranet. HoTMetaL PRO comes with everything you need to create, manage, and publish your Website.

This brief introduction to HoTMetaL PRO includes the following topics:

•	New features.

•	A description of the HoTMetaL PRO documentation and other information resources.

•	Internet service providers.

•	Accessibility.

The HoTMetaL PRO 6.0 Evaluation Version contains most of the functionality of HoTMetaL PRO 6.0. The following features are not present in HoTMetaL PRO 6.0 Evaluation Version:

•	Ulead PhotoImpact SE, Ulead Photo Explorer 4.2, and Ulead GIF Animator, a suite of image editing programs.

•	HoTMetaL Personal Server: the personal, PC-based version of HoTMetaL Application Server (HoTMetaL APPS).

•	Visual Dynamic Keyboard: an on-screen keyboard that makes HoTMetaL PRO and other applications more accessible to users with mobility impairments.

•	Document conversion: converting word-processor files to HTML.

•	Spell checking and thesaurus.

•	Assets: The assets available from the Resource Manager are a subset of those shipped with HoTMetaL PRO 6.0.

•	Database Import wizard: import a database or spreadsheet into HoTMetaL PRO.

•	Document templates: the document templates available from HoTMetaL PRO New... command are a subset of those shipped with HoTMetaL PRO 6.0.

•	 Site Maker: a wizard for creating an entire site from scratch.

•	Microsoft Internet Explorer 5.0: HoTMetaL PRO uses Microsoft Internet Explorer 5.0 components in its implementation of the following features: the Resource Manager, WYSIWYG-Frames view, and Page Preview, macros, and scripting. HoTMetaL PRO will still operate on Windows 95 and NT 4.0 if Internet Explorer and Active Desktop are not installed, but these features will be unavailable. On Windows 98, these features will always be available.

•	Alternative rules files, such as the WebTV rules file.

•	Netscape Communicator 4.6.

•	The printed User Guide.

•	The HTML Reference Guide, a guide to HTML elements and attributes.

HoTMetaL Support Center, Forum, and FAQ

SoftQuad's Technical Support Center is at http://www.hotmetalpro.com/support/ The HoTMetaL PRO Discussion Forum, a place where users of HoTMetaL PRO can exchange ideas and ask each other questions about HoTMetaL PRO in general, is available at http://www.hotmetalpro.com/support/forums/hmproforum/. The Forum is generally intended to be a place of discussion and exchange of ideas among users: though SoftQuad Technical Support does drop in from time to time, the best way to have SoftQuad address specific questions is to contact Technical Support directly (hotmetal-support@sq.com). Please remember to use that address rather than the forum if you need a direct response from SoftQuad. A HoTMetaL FAQ (Frequently Asked Questions) page is available at http://www.hotmetalpro.com/support/hotmetal/faq/

SoftQuad Technical Support is also available by phone:

•	North, Central, and South America: +1 416 544 8879

•	Rest of the world: +44 (0) 8707 270228

  More on this topic


System requirements

HoTMetaL PRO runs under Windows 95, 98, and NT 4.0. Your system must have the following:

•	 Pentium or compatible processor (133 MHz or higher )

•	32 MB of available RAM

•	Super VGA display, 256 colors, 640 x 480 resolution

•	50 MB of disk space (for minimal installation)

•	20 MB extra disk space during installation

•	CD drive for installation

•	On Windows NT 4.0, Service Pack 3 or higher must be applied before you install and use HoTMetaL PRO 6.0.

Internet Explorer

 HoTMetaL PRO uses Microsoft Internet Explorer 5.0 components in its implementation of the following features:

•	Resource Manager

•	WYSIWYG-Frames view

•	Page Preview

•	previewing pages in Site Maker

 Additionally, the Thumbnail View and the Open dialog preview window require that Microsoft Active Desktop be installed. HoTMetaL PRO will still operate on Windows 95 and NT 4.0 if Internet Explorer and Active Desktop are not installed, but these features will be unavailable. On Windows 98, these features will always be available.


What's new in HoTMetaL PRO

If you have been using HoTMetaL PRO 5.0, you're probably interested in what's new in version 6.0.

•	 Several changes have been made to HTML source editing, including access to the Attribute Inspector from HTML Source view. The Attribute Inspector lists all of the valid attributes for the current element. In addition, HoTMetaL PRO can now import HTML without reformatting the code.

•	The Tags On view includes collapsible tag icons. Simply click on the plus or minus sign in the tag icon to hide or show the tag contents. This feature is useful for rearranging elements and reducing the amount of scrolling when working with the document's structure.

•	The validation process now provides a logged summary of all validation errors requiring only a single-click to jump to the location in the document where the error occurred.

•	Enhancements to the site-wide Find in files... command let you search for and replace strings of HTML text.

•	A new Choose Color dialog gives you instant access to the browser-safe color palette and lets you create custom palettes of commonly used colors.

•	New Assets are available in HoTMetaL PRO, including the HoTMetaL PRO Button Maker, and interactive tool for designing custom dynamic buttons on-the-fly, without using a graphics program.

•	 The  Database Import Wizard now gives you one-button access to database and spreadsheet files for your Website.  The Database Import wizard is provided with HoTMetaL PRO 6.0, but not with the Evaluation Version that you are now using. Choose 'How To Purchase' in the Help menu for ordering information.

•	You can now edit files on remote sites simply by dragging and dropping from the Resource Manager, or from a browser. Remote editing gives you virtually seamless round-trip FTP access to remote files. It's like having a network drive mounted locally. In addition, HoTMetaL PRO supports site synchronization between local and remote sites to ensure that the most recent files are published. Learn more about the new Remote connectivity features of HoTMetaL PRO in Remote editing and publishing.

•	A new COM interface and scripting support make HoTMetaL PRO fully customizable. HoTMetaL PRO supports any Windows scripting engine language, including JavaScript, VBScript, Perl and Python. For more details, choose HoTMetaL PRO 6 Programmer's Guide in the Windows Start menu group where you installed HoTMetaL PRO.


Finding information

A printed User Guide is shipped with HoTMetaL PRO 6.0, but not with the Evaluation Version that you are now using. Choose 'How To Purchase' in the Help menu for ordering information.

There are several different ways to find information on HoTMetaL PRO.

•	User Guide –  The printed manual. The User Guide covers the core topics that you need to be familiar with to create Web pages and manage a site with HoTMetaL PRO. Most chapters have both tutorial and reference sections. The reference sections are also contained in the online help. The basic information that you need in order to get started is in the following  sections: Creating your first Web page, Links and Managing your Website. Even if you are familiar with previous versions of HoTMetaL PRO, you should read these chapters to become familiar with changes to the HoTMetaL PRO user interface.

•	Online help – Contains the reference sections of the User Guide, and extra information on special topics that the printed User Guide doesn't cover. You can access online help by choosing Contents or Search for Help on... from the Help menu, or by pressing F1.

•	HoTMetaL Programmers' Guide: a guide to customizing HoTMetaL PRO using its DOM- and COM-based API. To display the Programmers' Guide, choose Programs from the Start menu, then SoftQuad Applications and HoTMetaL PRO 6.0 Programmers' Guide.

•	Help buttons – Most dialog boxes in HoTMetaL PRO have Help buttons, which take you directly to the appropriate help topic.

•	Tip of the Day... – Displays a tip about using HoTMetaL PRO every time you start up HoTMetaL PRO. This feature can be disabled by clicking on the Show Tips on Startup check box.

•	Release notes – You can get the latest release information about HoTMetaL PRO by opening the readme.doc file in the HoTMetaL PRO folder (this file is accessible from the HoTMetaL PRO program group).

•	The HoTMetaL PRO Technical Support Center, Discussion Forum, and FAQ (Frequently Asked Questions)  page.


Internet service providers

In order to use a Web browser and put your HTML documents and images on the Web, you must have access to an account with an Internet service provider (ISP). Most ISPs provide you with browser software to access the World Wide Web, and space on their server to put your HTML documents. Once your documents are on a server that is connected to the World Wide Web, they can be accessed from anywhere. See http://www.softquad.com for a listing of HoTMetaL Power Partner ISPs that have special offers for HoTMetaL PRO users.


Accessibility

HoTMetaL PRO provides methods for checking whether your document is accessible to everyone, including users with disabilities and users of text-only browsers.

The Visual Dynamic Keyboard (VDK) is an on-screen keyboard that provides greater accessibility to Windows applications to users with mobility impairments. It enables users to enter text, select commands, activate dialog box controls, etc., without using the regular keyboard and mouse. It appears on-screen in a resizable window, as a keyboard with rectangular keys. The VDK has special support for HoTMetaL PRO commands. Using the VDK, users can work with applications using alternative access methods: automatic scanning, inverse scanning, direct-dwell selection, direct-click selection, and five-switch directed input.

 The Visual Dynamic Keyboard is shipped with HoTMetaL PRO 6.0, but not with the Evaluation Version that you are now using. Choose 'How To Purchase' in the Help menu for ordering information.


The HoTMetaL interface

What's covered in this chapter

This chapter describes the HoTMetaL PRO interface and how it works. You don't have to read the whole chapter all at once, but you may find it a useful reference if some parts of the interface are unfamiliar. The topics covered include:

•	Document view modes.

•	HoTMetaL PRO options.

•	HoTMetaL PRO windows.

•	Full screen mode.

•	Workbook mode.

•	Saving and closing multiple documents.

•	Using workspaces.

•	Right-click commands.

•	The HoTMetaL PRO Choose Color dialog.

•	Toolbars and toolbar customization.

•	Menus.

  More on this topic


Introduction to the interface

The HoTMetaL PRO interface lets you perform a variety of tasks, from simple tasks such as opening a document or inserting an image, to complex tasks such as creating frames, designing cascading style sheets, and publishing your files to a server. The interface is designed to make editing Web pages easy for the beginner, the intermediate user, and the expert.

The interface is also customizable. For example, you can configure the interface so that only the toolbars that you use appear. Menus and windows can also be customized to appear as you would like them to.

 The HoTMetaL PRO interface consists of:

•	Menus.

•	Toolbars.

•	The main document window, which shows different editing views.

•	Additional windows that open when certain functions are invoked, such as the Attribute Inspector and site management view windows.

When you start HoTMetaL PRO for the first time, the HoTMetaL PRO document window opens in Tags On view with a new blank document, Workbook mode is turned on, and the Resource Manager  window is open. You can now start editing a document in the document window, and you can drag and drop objects from the Resource Manager.


Document view modes

HoTMetaL PRO provides you with different ways of displaying your documents, depending on how you want to work with them. To understand the views, you should know a little something about the way that HTML works.

When you edit an HTML file, you are creating markup. The markup consists of:

•	Elements, which surround parts of the document according to their function or appearance. Elements begin with start-tags and end with end-tags. You can enter elements by using the HoTMetaL PRO toolbars or the Insert menu.

•	Attributes, which are values that are associated with elements, but are not part of the content. You can enter and change attributes by choosing Attribute Inspector from the View menu, right-clicking inside an element and choosing Attribute Inspector from the pop-up menu, or pressing F6. As well, many elements have special dialog boxes for entering and changing the most important attributes; these can typically be accessed from the Insert menu or by double-clicking inside the element or its graphical representation.

It's up to you how much of the detail of the HTML markup you want to see. There are five different viewing modes in HoTMetaL PRO: HTML Source, WYSIWYG, WYSIWYG:Frames, Tags On, and Page Preview views. To switch between the different views, do one of the following:

•	Choose HTML Source, WYSIWYG, WYSIWYG:Frames, Tags On, or Page Preview from the View menu.

•	Click on one of the buttons in the lower left corner of the HoTMetaL PRO document window ( [image] ); the activated button is the currently selected view—HTML Source, Tags On, WYSIWYG, WYSIWYG:Frames, or Page Preview.

•	Click on one of the buttons in the Views toolbar ( [image]).

•	Press Ctrl+Shift+H to switch to HTML Source view, Ctrl+Shift+W to switch to WYSIWYG view, Ctrl+Shift+F to switch to WYSIWYG:Frames view, Ctrl+Shift+O to switch to Tags On view, or Ctrl+Shift+V to switch to Page Preview.

Note: The WYSIWYG:Frames view is available only if the current document contains frames. Microsoft Internet Explorer must be installed on your PC in order for WYSIWYG:Frames and Page Preview to be available.

  More on this topic


Tags On view

When you first launch HoTMetaL PRO, any documents you create or edit will be displayed in Tags On view. The Tags On view shows start- and end-tags for HTML elements in your document. It's not an exact representation of the code—for that, you need the HTML Source view. However, the full display of the code can show a lot of detail that you may not always need. The Tags On view is very useful for moving around and working with elements and their attributes. When you hover your cursor over an element, a Tag tip appears; displaying all set attributes. Start-tags contain a '-' or '+' sign that you can click on to collapse or expand the element.

You do not have to worry about the details of the HTML markup; HoTMetaL PRO takes care of that for you. You can also use structured editing commands, such as Element... in the Insert menu and Attribute Inspector in the View menu.

To display the current document in Tags On view, do one of the following:

•	Choose Tags On from the View menu.

•	Click on the [image] button from the Views toolbar.

•	Press Ctrl+Shift+O.

•	Click on the Tags On button from the [image] in the lower left corner of the HoTMetaL PRO document window


WYSIWYG view

WYSIWYG is an acronym for 'What You See Is What You Get'; that is, the way documents are displayed in this view is pretty much how they're going to look in a Web browser. The display includes images, alignment of block elements, tables, form objects (buttons, check boxes, and so forth) and background colors and images. You can use the same structured editing commands as you can in Tags On view. This display is a good way to get a sense of how your document will look on the World Wide Web. It's also easy and convenient to edit your document in this mode, much as you would in a word processor.

To display the current document in WYSIWYG view, do one of the following:

•	Choose WYSIWYG from the View menu.

•	Click on the [image] button from the Views toolbar.

•	Press Ctrl+Shift+W.

•	Click on the WYSIWYG button from the [image] in the lower left corner of the HoTMetaL PRO document window


HTML Source view

This view shows the actual HTML code in your document. HoTMetaL PRO's HTML Source view is more useful than opening the file in a text editor: the HTML Source view is color-coded and block elements can be indented (this indentation—which makes the HTML Source view much easier to read—is called 'pretty printing'). You can also use the Insert Element and Attribute Inspector windows when in HTML Source view.

To display the current document in HTML Source view, do one of the following:

•	Choose HTML Source from the View menu.

•	Click on the [image] button from the Views toolbar.

•	Press Ctrl+Shift+H.

•	Click on the HTML Source button from the [image] in the lower left corner of the HoTMetaL PRO document window

The options for tag color and pretty-printing can be modified by choosing Options... from the Tools menu and clicking on Source View, and choosing Customizations from the Tools and clicking on Source Layout. For more information, see Source view options and Source Layout.


WYSIWYG:Frames view

The WYSIWYG:Frames view enables you to view and edit frames and frame content. You can also edit frames by using the Frames toolbar or the Frameset menu. To view how the document will appear in a Web browser with frames and their content, choose Page Preview from the View menu. For more information on frames, see Creating frames .

To display the current document in WYSIWYG:Frames view, do one of the following:

•	Choose WYSIWYG:Frames from the View menu.

•	Click on the [image] button from the Views toolbar.

•	Press Ctrl+Shift+F.

•	Click on the WYSIWYG:Frames button from the [image] in the lower left corner of the HoTMetaL PRO document window

The WYSIWYG:Frames view is available only if the current document contains frames.

Note: Microsoft Internet Explorer must be installed on your PC in order for the WYSIWYG:Frames view to be available.


Page Preview

The Page Preview window enables you to view your document as it would appear in Microsoft Internet Explorer. This is a real browser window in which you can perform browser tasks such as navigating to links. There is no menu bar or toolbar in this window, but by right-clicking you can bring up a pop-up menu, in which you can perform actions such as moving back or forward, saving an image as wallpaper, viewing the properties of the document, and so forth.

Alternatively, you can choose one of the Web browsers from the Preview toolbar to preview your document. See Previewing your document for more information on using the Preview toolbar.

To display the current document in Page Preview view, do one of the following:

•	Choose Page Preview from the View menu.

•	Click on the [image] button from the Views toolbar.

•	Press Ctrl+Shift+V.

•	Click on the Page Preview button from the [image] in the lower left corner of the HoTMetaL PRO document window

Note: Microsoft Internet Explorer must be installed on your PC in order for Page Preview to be available.


HoTMetaL options

The Options... command in the Tools menu of HoTMetaL PRO lets you configure some aspects of HoTMetaL PRO functionality. You can set:

•	Options for viewing your documents, including:

•	Whether documents should be opened by default in Tags On view, WYSIWYG view, or HTML Source view.

•	Whether to show or hide background images, inline images, comments, URLs, and the HEAD element.

•	Setting the font and color of tags in Tags On view and text in HTML Source view.

•	Helper applications – viewers and editors for different file types.

•	File options, including making backups, controlling the number of files displayed in the list of recently edited documents and controlling line-feeds.

•	User and supplementary dictionaries for spell checking.

•	Server options.

For more details on options, see Setting HoTMetaL PRO options  in the HoTMetaL PRO online help.


HoTMetaL customizations

Choose Customizations... from the Tools menu to display the Customization editor. This dialog has two tabs:

•	The General tab enables you to specify the default content that will be inserted when a specific element is inserted, or specify a script that will be run when the element is inserted.

•	The Source Layout tab enables you to specify the layout of of the HTML Source view—which elements should be indented, on a separate line (block), or on the same line (inline), and so forth.


HoTMetaL windows

HoTMetaL PRO 6.0 integrates document editing and site management functions into a single application. You can have one or more windows pertaining to these functions open in your work area at a particular time:

•	Attribute Inspector – Enables you to edit attributes of elements. You can open the Attribute Inspector by choosing Attribute Inspector from the View menu, right-clicking and choosing Attribute Inspector from the pop-up menu, clicking on the [image] button in the View toolbar, or pressing F6. For more information on the Attribute Inspector, see Editing attributes with the Attribute Inspector.

•	Site management – There are three main windows that enable you to publish, develop, and maintain projects. Before you can display any site management windows, you have to open or create a project. When a project is open, you can open the Project tab by clicking on the [image] button to open the Resource Manager, and you can open the Page Links and Web View windows by choosing Page Links and Web View from the View menu, or by clicking on the [image] and [image] buttons in the View toolbar. For more information on the Project tab, Page Links view, and Web View, see Managing your Website .

•	Element List – Enables you to insert HTML elements into your document. You can open the Element List window by choosing Element List from the View menu, or Element... from the Insert menu, or by clicking on the [image] button in the View toolbar. For more information on inserting elements, see Inserting Elements .

•	Resource Manager – A file management tool that gives you access to all kinds of Web objects: images, cascading style sheets, scripts, and dynamic HTML, and lets you perform 'intelligent insertion' of these objects. The Resource Manager (Remote tab) also gives you access to files on remote sites. You can open the Resource Manager by choosing Resource Manager from the View menu, or by clicking on the [image] button in the View toolbar. For more information on using the Resource Manager, see The Resource Manager and Managing your Website
.
Note: Microsoft Internet Explorer must be installed on your PC in order for the complete Resource Manager functionality to be available.

  More on this topic


Docked and floating windows

Windows in HoTMetaL PRO can be customized and moved. When you first bring up a window, such as the Attribute Inspector, it will be attached to the work area border. The window is said to be docked. If you want to turn the window into a floating window that you can move anywhere on your screen, you undock the window.

Undocking a window

To undock a window, do one of the following:

•	Double-click on the 'grab-handles' at the top of the window.

Or:

•	Click and hold on the handles at the top of the function window, and drag the window away from its docked position.

Or:

•	Right-click on the handles at the top of the function window. A pop-up menu appears.

•	Choose Allow Docking. This turns off docking.

The window now appears as a floating window.

Moving a window

To move a window:

•	Drag the window to position it anywhere on the screen.

•	You can resize the window by moving the mouse pointer over an edge until it becomes a two-headed arrow, and then clicking and dragging.

Redocking a window

To redock a window, do one of the following:

•	Right-click on any grey edge of the window. A pop-up menu appears.

•	Choose Allow Docking to turn docking back on.

•	Do one of:

•	Double-click on the window's title bar. .
Or:

•	Click and hold on the window's title bar and drag the window to a docked position. See Rules for the behavior of docked and floating window for more information.
Or:

•	Right-click on the title bar at the top of the window. A pop-up menu appears.

•	Choose Redock.

The window will return to its original docked position.

Displaying a window as document window

Most windows, such as the site management windows and the resource manager, can be displayed as document windows (which will be tabbed if workbook mode is turned on).

•	Right-click on an edge of the window.

•	Turn off Docking View in the pop-up menu.


Rules for the behavior of docked and floating window

If the dialog is floating:

1	Dragging the dialog so that the left edge is outside the left edge of the HoTMetaL PRO work area causes it to dock on the left, with the handles on the top.

2	Dragging the dialog so that the left edge is about 2.5 inches (6 cm) from the right edge of the HoTMetaL PRO document window area causes it to dock on the right, with the handles on the top.

3	Dragging the dialog so that the top edge is higher than the bottom-most toolbar causes the dialog to dock below the toolbars, with the handles on the left.

4	Dragging the dialog so that the top edge is about 2.5 inches (6 cm) from the bottom of the HoTMetaL PRO work area causes the dialog to dock below the document window, with the handles on the left. If the dialog is docked at the left or right, dragging it so that the top edge is below the top of the work area causes it to float. If the dialog is docked at the top or bottom, dragging it so that the left edge is to the right of the document area causes it to float.

5	When in a drag/undock operation, HoTMetaL PRO will draw an outline that represents what will happen if the mouse is released at that instant. The rectangle displayed will have one of two sizes. One size represents the last floating window size. The other represents the last docked size.


Window buttons

Docked windows contain two buttons for closing and expanding the window. These buttons are located at the top right or top left corner (depending on the window's docked position).

The [image] button closes the docked window. The [image] button expands the docked window. This button is selectable only when a window is stacked on top of another window. This option is useful when you want to expand a window's viewing space. Expanding a window will cover up most of another existing window to provide a larger viewing window. To expand a docked window:

•	Click on the window's [image] button.

•	The selected window expands, covering up the space of the other window. This gives you more viewing space for the selected window.

You will notice that the handles of the covered window are still visible.

To view the covered window again, click on its [image] button.


Full screen mode

Full screen mode enables you to display the HoTMetaL PRO window in the entire viewing space of your monitor. To view the HoTMetaL PRO window in full screen mode:

•	Click on the [image] toolbar button or choose Full Screen from the View menu.

The HoTMetaL PRO document window fills the screen. The menu bar and the full screen toolbar button will be the only toolbars visible. Views such as the Resource Manager can be made visible in Full Screen mode. The toolbars and docking windows are remembered when you switch between Full Screen and Normal mode for the duration of the HoTMetaL PRO session. If you want to make other toolbars visible, choose Toolbars... from the View menu and select the toolbars you want.

To return the HoTMetaL PRO document window to its regular size, do one of the following:

•	Click on the [image] toolbar button.

•	Choose Full Screen from the View menu.

•	Press the Esc key if there is an active document.

The HoTMetaL PRO document window returns to its original size.


Workbook mode

Workbook mode enables you to access multiple documents quickly and easily. You can have multiple documents open by continually opening new documents from the File menu; workbook mode enables you to see and select documents using tabs at the bottom of each document. Workbook mode is particularly useful when you are creating a Website with multiple pages. To select workbook mode:

•	Choose Workbook Mode from the View menu.

When a file is open, a tab will appear at the bottom of the HoTMetaL PRO window, underneath the view icons, containing the name of the document.

•	Click on the tab of the document that you want to view.

Workbook mode makes it possible to drag-and-drop objects that are not in the foreground of the document window:

•	Click and drag the object over the desired document's workbook tab. This brings the document to the foreground so you can drop the object where you want.

This is useful for dragging-and-dropping objects from one document to another.

Most windows, such as the site management windows and the resource manager, can be displayed as tabbed document windows if workbook mode is turned on.

•	Right-click on an edge of the window.

•	Turn off Docking View in the pop-up menu.


Saving and closing multiple documents

If you have multiple documents open, you can use the Save All command to save any changes. To use the Save All command:

•	Choose Save All from the File menu, click on the [image] button, or press Ctrl+L.

All of the documents are saved.

Similarly, if you want to close all of the open documents:

•	Choose Close All from the File menu. All of the open documents will close.


Using workspaces

A workspace refers to the current state of a HoTMetaL PRO session, including: which files are open, which windows and toolbars are visible, and whether windows are floating or docked, and their position. Saving a workspace saves this state information. For example, if you have a document open in HoTMetaL PRO in Tags On view, with the Attribute Inspector open, Web View open, and with a customized toolbar selected, you can save that workspace. The most recently saved workspace will be opened the next time you start HoTMetaL PRO.

To create and save a workspace:

•	Choose Workspace from the File menu and then choose Manage... from the fly-out menu. The Workspace Manager dialog box appears.

•	Click on the [image] button. A blank workspace name will appear in the Workspaces list.

•	Type in a name for your workspace and press Enter.

•	A dialog box will appear asking if you want to save the workspace. Click on Yes.

The current state of HoTMetaL PRO is saved.

To save a workspace:

•	Choose Workspace from the File menu and then Manage... from the fly-out menu.

•	Choose a workspace.

•	Click on Save. The workspace is saved.

To open an existing workspace:

•	Choose Workspace from the File menu, then choose a workspace from the list underneath the Manage... menu item. The workspace will open.

To open a currently open workspace:

•	Choose Workspace from the File menu and then Manage... from the fly-out menu.

•	Choose the workspace that you want to open from the list in the Workspace Manager dialog box and click on Open.

Note: Opening a workspace closes the current workspace. If you want to save your current workspace, do it before opening a new one.


Right-click commands

In addition to the toolbar buttons or menu commands, HoTMetaL PRO has pop-up menus available when you right-click on items such as windows, text, graphics, and links. Right-clicking on an item presents you with different commands; usually the most commonly used commands associated with that that item. It is often more convenient to choose a command from a pop-up menu because the available commands are those that are directly applicable to the object being clicked on.

Right-clicking on a window typically allows you to:

•	Hide the window.

•	Dock or redock the window.

Right-clicking on a toolbar area or blank document window typically allows you to:

•	Toggle toolbars on or off.

•	Open the Commands dialog box.

Right-clicking on a piece of text typically allows you to:

•	Cut, copy, and paste.

•	Insert or select an element.

•	Invoke the Attribute Inspector.

Right-clicking on a graphic typically allows you to:

•	Edit or view an image file.

•	Select an element.

•	Invoke the Attribute Inspector.

•	Look at the image's properties.

Right-clicking on a link typically allows you to:

•	Edit or view a linked item.

•	Insert or select an element.

•	Invoke the Attribute Inspector.

Right-clicking on a dialog box typically allows you to:

•	Dock or redock the dialog box.

•	Hide the dialog box.


The Choose Color dialog

Whenever you need to choose a color (for example, when you use the Text Color... command, the Page Properties... command, or the Source View options tab), HoTMetaL PRO displays the Choose Color dialog.

This dialog contains a browser-safe color palette and enables you to define one or more custom palettes.

To choose a color:

•	Double-click on the color

Or:

•	Click on the color in any palette, so that it is displayed underneath the Color to Use label.

•	If desired, modify the color parameters using the Red, Hue, etc. controls.

•	Click on OK.

Or:

•	Define a color using the using the Red, Hue, etc. controls.

•	Click on OK.

The browser-safe palette

The browser-safe palette contains 216 browser-safe colors. You can sort these colors according to their concentrations of red, green, or blue by clicking on the Red, Green, or Blue button. Click on Advanced to do primary and secondary sorting by color or by hue, lightness, and saturation.

Creating custom palettes

To create a new color palette:

•	Click on the [image] button.

•	Enter the palette name in the text box to the left.

You can define several custom palettes,

To add a color to a custom palette:

•	Choose a color from any palette, or define one using the Red, Hue, etc. controls.

•	The chosen color will be displayed underneath the Color to Use label and to the left of the [image] button. To add the color to the palette, double-click on either of these areas, or click once on the [image] button.

To delete a color from the custom palette:

•	Click on the color.

•	Click on the [image] button.

Defining custom colors

You can define a custom color (which may not be browser-safe) using the controls in the Color to Use area. You can specify red, green, and blue or hue, lightness, and saturation values. Values can be entered in Decimal or Hex. To change the custom color to the closest browser-safe color, click on Safe.

The Windows Color dialog

To display the Windows Color dialog:

•	Click on the [image] button.


Toolbars

You can access commands in HoTMetaL PRO through the toolbars. Tooltips—short descriptions of what the toolbar button does—appear near the toolbar buttons if you move your mouse cursor over them. There are seventeen toolbars available, though all are not displayed by default. When you open HoTMetaL PRO for the first time, the Menu, Standard, Preview, Full Screen, and Formatting toolbars are turned on.

  More on this topic


Moving toolbars around

You can move any toolbar to any other position in the toolbar area at the top of the HoTMetaL PRO screen, or move a toolbar off that area, where it becomes a floating toolbar (sometimes called a 'palette'). Floating toolbars can be moved anywhere on the screen.

To turn a toolbar into a floating palette:

•	Move your cursor over the toolbar's 'handle' [image], and click and hold on the handle.

•	Drag the toolbar anywhere on the screen to make it a floating toolbar.

To resize a toolbar:

•	Place your cursor over the left or right side of the toolbar until it becomes a double-arrow.

•	Drag the sides of the toolbar right or left to create different floating toolbar sizes.

To redock a toolbar:

•	Drag the toolbar to the left or right edge of the HoTMetaL PRO document window with your mouse and release.

Or:

•	Double-click on the title bar.

The toolbar becomes docked, like the toolbar area at the top of the screen.


Turning toolbars on or off

You can turn any toolbars on or off. This is useful for having only the toolbars that you use appear. To turn toolbars on or off, do one of the following:

•	Right-click on the background of the toolbar area above the HoTMetaL PRO document window. A pop-up menu appears.

•	Toggle a toolbar on or off by choosing the toolbar from the pop-up menu.

Or:

•	Choose Toolbars... from the View menu. The Toolbars dialog box appears.

•	Click on the check box for the toolbar that you want to turn on or off.

•	Click on Close.

HoTMetaL PRO remembers these toolbar settings the next time you start up.


Toolbar functions

The toolbars are described briefly here. For more details on the functions that each toolbar deals with, see the appropriate section of the manual.

•	Menu - This toolbar contains all of the menus and their available commands:

•	File

•	Edit

•	View

•	Insert

•	Format

•	Tools

•	Table

•	Form

•	Frameset

•	Site

•	Window

•	Help

•	Standard - This toolbar contains many basic commands, including file commands such as:

•	 - New Page

•	 - Open

•	 - Save

•	 - Save All
Word-processing commands such as:

•	 - Find text in Site

•	 - Find

•	 - Find Next

•	 - Spell Check
Indenting commands:

•	 - Indent selection

•	 - Outdent selection
Standard text editing commands such as:

•	 - Cut

•	 - Copy

•	 - Paste

•	 - Undo

•	 - Redo
Insertion commands for many building blocks of Web pages:

•	 - Images

•	 - Links

•	 - Tables

•	 - Elements

•	 - Resource Manager
Moving between documents:

•	 - Previous window

•	 - Next document
Web page validation:

•	 - For conformance with the the HTML standard

•	 - For accessibility guidelines
Accessing online help:

•

•	Preview - Use this toolbar to put in specific Web browsers for previewing your documents. By default, Microsoft Internet Explorer is in the toolbar because it is required to enable certain HoTMetaL PRO functions. If you choose to install Netscape Navigator, it will appear in the Preview toolbar upon startup as well.

•	 - Microsoft Internet Explorer.

•	 - Netscape Navigator.

•	Formatting - Use this toolbar to change the appearance (and hence, HTML code) of both inline text and block elements. You can change the style of the current block element using the pull-down menu:

•	 - Change the text style for blocks of text

•	 - Change the font of the selected text

•	, [image] - Change the size of the text.

•	 - Changes decors

•	, [image], [image] - Bold, Italic, and Underline

•	 - Change the color
The alignment:

•	, [image], [image] - Left, Center, Right
Insert lists:

•	 - Ordered list

•	 - Unordered list

•	Advanced - Insert advanced objects in your web page:

•	 - ActiveX Controls

•	 - Applets

•	 - Inserts a Design Time Control (DTC).

•	Full Screen

•	 - Use this toolbar to make the HoTMetaL PRO document window full screen.

•	Views - Use this toolbar to select the different editing views and function windows.Editing views:

•	 - Shows the HTML Source view in the document window.

•	 - Shows the Tags On view in the document window.

•	 - Shows the WYSIWYG view in the document window.

•	 - Shows the WYSIWYG:Frames view in the document window.

•	 - Shows the document as it would appear in a Web browser in the document window.
Function windows:

•	 - Opens the Page Links window for opened projects.

•	 - Opens the Web View window for opened projects.

•	 - Opens the Attribute Inspector window.

•	 - Opens the Insert Element window.

•	 - Opens the Pocket View window.

•	 - Opens the Resource Manager window.

•	 - Shows the document window in full screen mode.

•	Site - Use this toolbar to perform site management functions:

•	 - Publishes files to a server using HoTMetaL PRO's remote synchronization utility

•	 - Remap the site

•	Table - Use this toolbar to create and edit tables.

•	 - Insert a table

•	 - Edit table properties
Edit rows:

•	 - Insert row above

•	 - Insert row below

•	 - Delete row
Edit columns:

•	 - Insert column left

•	 - Insert column right

•	 - Delete column
Moving rows and columns:

•	 - Move row up

•	 - Move row down

•	 - Move column left

•	 - Move column right
Merge cells:

•	 - Merge cell right

•	 - Merge cell left

•	 - Merge cell up

•	 - Merge cell down
Split cells:

•	 - Split cell into rows

•	 - Split cell into columns

•	Table Advanced - Use this toolbar to contract cells in a table.

•	 - Pulls the left boundary of the cell one cell to the right

•	 - Pulls the right boundary of the cell one cell to the left

•	 - Pulls the bottom boundary of the cell one cell up

•	 - Pulls the top boundary of the cell one cell down

•	Symbols - Use this toolbar insert symbols.

•	 - A symbol

•	Special characters - Use this toolbar to insert special characters for letters that have accents.

•	 - A special character

•	Frames - Use this toolbar to insert frames into your web page.

•	 - Split selected frame into rows

•	 - Split selected frame into columns

•	 - Delete selected frame

•	 - Toggle selected frame's scrolling attribute

•	 - Toggle selected frame's scrolling attribute automatically

•	 - do not toggle selected frame's scrolling attribute

•	 - Toggle borderless frameset attributes

•	- Frame resizability toggle

•	 - Frame size

•	Quick Tools - Inserts various HTML elements.

•	 - A paragraph

•	 - A heading

•	 - Preformatted text

•	 - Blockquote

•	 - Address

•	 - A comment (not visible in Web browsers)
Insert components of a definition list:

•	 - Definition (DL)

•	 - Definition list term (DT)

•	 - Definition list definition (DD)
Insert:

•	 - A line break

•	 - A horizontal rule
Format the current text as:

•	 - Emphasized

•	 - Strong

•	 - Teletype

•	 - Citation
Insert special characters:

•
Insert a bookmark/link:

•	 - Bookmarks

•	 - Link to bookmark
Remove tags:

•

•	Forms - Create forms and insert form elements. Insert a form:

•
Insert input elements:

•	 - Text boxes

•	 - Text area

•	 - Check box

•	 - Option button

•	 - List box

•	 - Drop-down lists

•	 - File upload
Insert buttons:

•	 - Submit button

•	 - Reset button

•	 - Push button

•	 - Image button
Insert hidden elements:

•	 - Password field

•	 - Hidden input

•	Macros - Use this toolbar to record and play macros:

•	 - Record

•	 - Stop recording

•	 - Play macros

•	Image Mapping - Create and edit image maps:

•	 - Select an image map area

•	 - Create a circle area

•	 - Create a rectangle area

•	 - Create a polygon area

•	 - View the image map areas


Menus

All commands can be chosen from the menus. The following list gives a brief description of the commands in each menu.

•	File menu:

•	Creating, opening, saving, and closing documents and projects.

•	Previewing documents and projects.

•	Editing document or project page properties.

•	Creating, opening, saving, and closing workspaces.

•	Creating new folders for projects.

•	Print Preview, and printing documents and projects.

•	Exiting HoTMetaL PRO.

•	Edit menu:

•	Undoing and redoing actions.

•	Cutting, copying, pasting, and deleting text and markup.

•	Commands for markup: selecting, joining, changing, splitting, and removing elements.

•	Finding and replacing text and markup.

•	Finding and replacing URLs.

•	Finding and replacing in files.

•	Renaming folders or files.

•	View menu:

•	Changing views (HTML Source, WYSIWYG, WYSIWYG:Frames, Tags On, and Page Preview).

•	Showing or hiding toolbars.

•	Showing or hiding inline images and table grids.

•	Opening the Element List to insert HTML elements.

•	Opening the Attribute Inspector to view and modify attributes.

•	Opening the Element List to view the HTML elements available for editing.

•	Making the document window full-screen.

•	Turning on Workbook mode.

•	Opening the Resource Manager.

•	Opening the different site management windows.

•	Opening the Thumbnail View.

•	Insert menu:

•	Inserting elements, special characters, symbols, comments, and horizontal rules.

•	Inserting links, images, and bookmarks.

•	Inserting ActiveX Controls, Java applets, Design-Time Controls, and Database Tables.

•	Format menu:

•	Increasing or decreasing text size.

•	Changing text format: bold, italic, underline, color, etc.

•	Changing block alignment (left, right, centered).

•	Indenting and outdenting a selection.

•	Inserting or changing the current element to a numbered list, bulleted list, or definition list.

•	Opening the Cascading Style Sheet editor to: refresh styles, edit element styles, edit document styles, and add or create external styles.

•	Changing decors.

•	Tools menu:

•	Checking spelling and using the thesaurus.

•	Opening Image Editor and Image Explorer.

•	Converting the current document to a frame document.

•	Creating and editing macros.

•	Validating the HTML in your document.

•	Checking your document's accessibility.

•	Modifying HoTMetaL PRO options.

•	Table menu:

•	Inserting and editing tables and table properties.

•	Form menu:

•	Inserting and editing forms.

•	Frameset menu:

•	Edit frame contents.

•	Create and delete frames.

•	Add scrollbars.

•	Toggle selected frame's resizability attribute.

•	Create borderless frames.

•	Refresh or stop changes.

•	Edit frame properties.

•	Project menu:

•	Import a site.

•	Remap links.

•	Changing decors.

•	Check site for broken, orphan, or external links.

•	Show marked site files, legend, duplicate links, and minimal or full view.

•	Synchronize a site.

•	Build a site summary.

•	Window menu:

•	Changing display options for the documents you have open and switching between documents.

•	Help menu:

•	Accessing online help, technical reference, tip of the day, registration and problem report pages.

•	Getting version information about HoTMetaL PRO.

Note: The Menu toolbar can also be made into a floating toolbar or new toolbar area on the left or right side of the HoTMetaL PRO document window.


hmpro6.ini files

HoTMetaL PRO has two configuration files, hmpro6.ini in the Windows folder, and hmpro6.ini in the HoTMetaL PRO 6.0 folder. Some customizations described throughout this  help fileinvolve editing the hmpro6.ini file. You can modify either file, but if a value for a certain setting occurs in both files, the one in the Windows\hmpro6.ini file takes precedence.


Editing basics

 What's covered in this chapter

This chapter describes the first steps in building a Website: creating, editing, and saving a simple introductory page. The topics covered include:

•	Creating a new page.

•	Opening pages in HTML and other formats.

•	Opening remote pages.

•	Saving pages.

•	Creating paragraphs, headings, and lists.

•	Formatting your text.

•	Adding a background color or image.

•	Completing the page.

•	Printing the page.

The following sections explain how to create HTML markup in both the WYSIWYG and Tags On views. If you are familiar with word processor applications, but new to HTML, you may find it easier at first to work in WYSIWYG view. If you like to see how everything actually works, use the Tags On view. Most procedures can be done in both views.

  More on this topic


Creating a new page using a template

The templates available in the Evaluation Version that you are now using are a subset of those provided with HoTMetaL Pro 6.0. Choose 'How To Purchase' in the Help menu for ordering information.

You can use a template to help you create a new document. The HoTMetaL PRO page templates illustrate various decors and page layouts.

•	Choose New... from the File menu.

•	Choose Page From Template... from the fly-out menu.

Or:

•	Press Ctrl+T.

A tabbed template chooser dialog is displayed.

•	Click on the desired tab to display the templates in a particular category.

•	Double-click on the template that you want to use, or click once on the template and click on OK.

•	 Edit the page to insert your own content.

If you choose the 'Strict' or 'Transitional' template from the W3C tab, you can create documents that will be valid according to the W3C HTML 4.0 Strict or Transitional DTD. These documents can then be validated by independent validation services that use these DTDs.

 You may later wish to refer to  the 'Working with HTML' help section .


Opening the default template

If a default template has been chosen from the File options dialog, you can open this template immediately without having to use the template chooser.

•	Click on the [image] toolbar button.

Or:

•	Press Ctrl+N.

Or:

•	Choose New... from the File menu, and then choose New Page from the flyout menu.

This opens the default template.

From the File tab of the Options dialog, you can specify a different default template.


Opening a page

You can open a page that is formatted in HTML by choosing Open... in the File menu.

In addition to using the Open... command, you can open files by dragging and dropping them onto the background of the HoTMetaL PRO work area. You can also drag and drop files onto the square area where the horizontal and vertical scrollbars meet; this is particularly useful if the document window is maximized, making the work area background invisible.

By default, the Open dialog displays all files in the current folder that have the .htm or .html file extension.

Preview is available only with Active Desktop

When you select an .html or .htm file in the Open dialog box, you will see a preview image of the document in the Preview window. You can turn this option off by clicking the Preview check box.

If you prefer working in Source view, you can choose to have your documents open up in the Source view by clicking on the Open in source view check box in the Open dialog box.

You can quickly open recently edited files by choosing the file from the bottom of the File menu. By default, HoTMetaL PRO displays the last four files you opened. You can change how many filenames are displayed in the File tab of the Options dialog.


Opening a remote page

HoTMetaL PRO enables you to edit remote files using a round-trip FTP connection to download and upload files virtually seamlessly. For more details on using the remote connection utilities in HoTMetaL PRO, see Remote editing and publishing .

Before you can edit remote files, a remote site must be defined.

If the site has been defined:

•	Choose Resource Manager in the View menu to display the Resource Manager.

•	Click on the Resource manager Remote tab. The upper pane of the Remote tab contains an entry called Ftp Neighborhood. The bottom pane will display files and folders once the FTP connection has been made.

•	Open the Ftp Neighborhood entry by clicking on the '+' sign.

•	Locate the desired site.

•	Click on the site name to start the FTP connection. When the connection has been established, the files and folders underneath the root folder that you specified will be displayed in the lower panel of the Remote tab.

Once you have established a connection you can copy files to and from the server to your desktop, and to the Asset Manager, you can round-trip edit files, and you can synchronize files in folders.

Editing remote files

To edit a remote file, do one of the following:

•	Right-click on the file in the Remote tab of the Resource Manager.

•	Choose Edit File from the pop-up menu.

Or:

•	Select the file in the Remote tab and drag and drop it over any part of the HoTMetaL PRO interface outside of the Resource Manager. The document will be opened in HoTMetaL PRO. If you drag the file into an existing document, a hypertext link will be created to the file.

Or:

•	Drag a hyperlink from a browser and drag and drop it over any part of the HoTMetaL PRO interface outside of the Resource Manager.

To save your changes back to the remote server:

•	Click on the [image] toolbar button, or choose Save from the File menu.
You can save all of the open remote files using Save All . To save a local copy in a specific location, use Save As....

  More on this topic


Downloading and uploading files

You can easily move files to and from the remote site by simply dragging and dropping them to the desired location. To download a file from the Remote tab (the server) to the Desktop or Assets tab:

•	 Select the file(s) you want to download.

•	Click and drag the mouse over the Desktop tab or Assets tab; the tab opens.

•	Drop the selection into the tab. The file is copied to the local location.

•	To upload files, simply drag from one of the local tabs to the Remote tab.


Saving a page

You can save a page using Save or Save As... in the File menu.

The Save All command saves all of the documents that you have open in HoTMetaL PRO. If you are creating new documents, the Save As dialog box will prompt you to name each file sequentially. If the documents are existing documents, they will all be saved without any prompting.

If a document contains relative links, and you save it to a different folder, some relative links may become broken. To help you avoid this, the Save As dialog has three options for what to do with relative links:

•	Update URLs – any relative URLs in the document will be updated so that they still point to the same linked files, even though the current document is in a new location.

•	Copy Items – instead of changing the URLs, HoTMetaL PRO will copy the files that those URLs point to so that they are in the same locations relative to the new location of the current document. This option works only for first-level files, that is, linked files that are in the same folder as the current document.

•	No Change – performs a normal Save As. Relative URLs may become broken. No Change is the default option.

If you are saving a file for the first time, and you choose Update URLs or Copy Items, any file:/// URLs in the document will be converted to relative URLs, provided that the linked files and the current file are on the same disk partition (both on the C: drive, for example).


Adding basic components

The most basic Web page consists of headings, paragraphs, and lists. Headings help to structure the information in the document; paragraphs generally convey the information itself; lists are used for information that is best expressed in point form. While a page doesn't have to contain these features, many pages on the World Wide Web use this basic structure. As you learn more, you can build and improve the content and style of your pages.


Inserting headings

Most Web pages contain at least one heading. There are six levels of headings numbered from one to six. The topmost level of heading is called H1 (Heading 1).  These headings imply levels of importance with respect to each other in the document, and they are formatted by Web browsers to indicate this relative importance. While your pages don't have to contain headings, they are useful for structuring your information.

Headings do not have to be in any particular order, but because of the way documents are displayed in browsers, you will get better results by following these guidelines:

•	Heading 1 headings (H1) should be used as the highest level of heading, Heading 2 (H2) headings as the next highest, and so on.

•	Try to avoid skipping heading levels: for example, a level 3 heading should not come after an level 1 heading unless there is a level 2 heading between them.

The cursor may change size depending on the level of heading you selected. Heading 1, for example, is usually displayed in a larger type size, so the cursor will get larger. When you type the text of the heading, HoTMetaL PRO will display the text similar to the way most Web browsers would display that level of heading (for example, bold face type, two points larger than the body type).

To create a new heading:

•	Place the insertion point at the end of the existing text and press Enter. A new line is created.

•	Choose Heading 1 (or a lower level heading) from the pull-down menu of styles in the Formatting toolbar.

•	Type the text of the heading.

•	When you have finished typing the text of the heading, press Enter.

If you place the insertion point inside a paragraph and select a heading from the pull-down menu, the paragraph changes to a heading. If you place the insertion point at the end of the existing text and press Enter, a new line is created. Then you can enter new text and/or change the new line to any element you wish.

In Tags On view, you can move the insertion point outside of any existing element (P, ADDRESS, PRE, etc.). Then, any element you select from the pull-down menu will be inserted at that location.


Inserting paragraphs

Paragraphs are the most common way to present blocks of text. When you start a new document in HoTMetaL PRO, you are ready to begin typing a paragraph.

To insert a new paragraph in your page:

•	Place the insertion point at the end of the existing text and press Enter. A new line is created.

Or:

•	Choose Paragraph from the pull-down menu of styles in the Formatting toolbar.

Your Web page has to conform to certain rules. For example, you cannot have a paragraph inside a heading, or a heading inside a paragraph. If the insertion point is inside a paragraph and you choose a heading from the pull-down menu, HoTMetaL PRO will change the whole paragraph into a heading. Similarly, if you have the insertion point inside a heading and you choose paragraph from the menu, you will change the heading to a paragraph.

  More on this topic


Splitting and joining paragraphs

You can create two elements of the same type from a single element, or join elements together. The most common use for joining elements is to join two elements of the same type (combining two paragraphs, for example): when two different elements are joined, the second element becomes part of the first and any special properties of the second element are lost. For example, if you have a heading followed by a paragraph that you have centered and you join the two, the result would be a long heading with default alignment (not centered).

To split a single paragraph into two paragraphs:

•	Press Enter at any point in the paragraph.

The paragraph will split at the insertion point.

To join two paragraphs together, do one of the following:

•	Place the insertion point at the start of the second paragraph and press Backspace.

•	Place the insertion point anywhere in the second paragraph and press Ctrl+Shift+J.

•	Place the insertion point anywhere in the second paragraph and choose Join Element to Preceding from the Edit menu.

The second paragraph will join the first. A space is added automatically between the two pieces of text. These methods can be used to split and join other 'block'-style elements as well.


Creating and editing lists

Lists are useful for presenting itemized information, such as sequential steps to perform a task, and definitions.

Web pages can contain several different kinds of lists:

•	Numbered or ordered list (OL element) – Items in this type of list are numbered automatically by the Web browser. The numbering style will reflect nested lists .

•	Bulleted or unordered list (UL element) – Browsers will format unordered lists with a bullet or other special character. The character usually changes for nested lists .

•	Definition list (DL element) – An unordered list that contains pairs of terms (DT) and definitions (DD) .

•	Directory list (DIR element) – This unordered list is used to create a directory (for example, a file directory). Items in a directory list should not be longer than 24 characters .

•	Menu list (MENU element) – Menu lists are unordered lists. Items in a menu list should be no longer than one line .

Note: All lists, with the exception of definition lists, consist of a list element (such as UL or OL) that contains one or more list item (LI) elements.

You can insert lists in a number of ways:

•	By creating a new list.

•	By demoting paragraphs.

•	By promoting second-level list items.

You can also change the list type after you have created a list. For example, you might create a numbered list and then decide that you prefer bullets.

  More on this topic


Inserting a new list

To insert a new numbered, bulleted, directory, or menu list:

•	Place the insertion point where you want to insert the list and do one of the following:

•	Choose the type of list you want to add from the pull-down menu of styles in the Formatting toolbar.

•	Click on the [image] (numbered list) or [image] (bulleted list) toolbar button.

•	Choose Bulleted list or Numbered list from the Format menu.

A new list is created, containing a single list item.

Pressing Enter in a list item inserts a new list item after the current one.

To terminate a list, press Enter twice (if you're already in an empty list item, you have to press Enter only once).


Inserting a list inside a list

To insert a list inside a list (also called a nested list or sub-list):

•	Create a new list item after the current one (by pressing Enter, for example).

•	Press Tab, or right-click in the new list item and choose Demote from the pop-up menu.

This creates a new, empty list of the same type as the original list, inside the original list item. You can edit this list as you would any other list. To terminate this list and return to the outer list, press Enter twice.

If you have already created one or more list items that you wish to convert to a nested list:

•	Highlight the list item(s) that you want to put in a nested list.

•	Press Tab, or right-click and choose Demote from the pop-up menu.

You can also insert a list at any point in the current list item by choosing Element... from the Insert menu and inserting one of the list elements (OL, UL, DIR, or MENU).


Converting (demoting) paragraphs to a list

You can turn one or more paragraphs, block quotes, pre-formatted text blocks, or other paragraph-style text blocks into a bulleted list.

•	Select one or more paragraphs.

•	Press Tab.

If you demote paragraphs that are located between two bulleted lists, the two lists and the converted paragraphs will be combined.


Converting (promoting) list items to paragraphs

You can turn one or more list items into paragraphs.

•	Select one or more list items.

•	Do one of:

•	Press Shift+Tab.

•	 Right-click and choose Promote from the pop-up menu.

If you promote list items in the middle of a list, the list will be split.


Changing the list type

To change an existing list to a bulleted or numbered list, you can click on the bulleted list or numbered list toolbar button. For other list types, use the pull-down menu of styles in the Formatting toolbar, or the Insert Element dialog.

To change an existing list to another type of list:

•	Put the insertion point inside the list.

•	Do one of the following:

•	Click on the [image] or [image] toolbar button.

•	Choose the new list type from the pull-down menu of styles in the Formatting toolbar.

•	Choose the new list type from the Format menu.

•	Put the insertion point directly inside the list element, and choose Change Element... from the Edit menu to change the list element type.


Convert a pasted selection to a list

HoTMetaL PRO will convert a selection that has been pasted (or dragged and dropped) from another application into a list if:

•	Each line starts with one or more tabs.

•	There is only one data item per line (that is, after the initial tab(s) starting the line, there are no more tabs in the line).

•	Each line is indented (tabbed) by no more than one tab more or less than the previous line.

•	There are at least two lines.

Sub-lists will be created as necessary to reflect the indent levels of the list items.

Depending on its structure, a text selection could also be converted to a table. If the selection cannot be pasted as a list or table, it will be pasted as a paragraph.


Using definition lists

Definition lists are a special kind of list because instead of consisting of ordinary list items (LIs), they consist of a combination of defined terms and definitions. A basic definition list consists of alternating terms and definitions, but you can also have several terms or definitions in sequence. Most browsers will indent the definitions. Of course, you don't have to use this kind of list just for definitions: you can use it for any purpose that is suited to two-part lists.

The most convenient way to work with definition lists is to use the Quick Tools toolbar. If this toolbar is not displayed:

•	Right-click on the background of the toolbar area and choose Quick Tools from the pop-up menu.

To insert a definition list, do one of:

•	Choose Definition list from the pull-down list of styles in the Formatting toolbar.

•	Click on the [image] toolbar button in the Quick Tools toolbar.

You can use the following techniques to edit definition lists:

•	To create a new instance of the current item (defined term or definition), press Enter.

•	To change a definition into a defined term, click on the [image] toolbar button.

•	To change a defined term into a definition, click on the [image] toolbar button.

•	To terminate a definition list, press Enter twice (if you are in an empty item, you have to press Enter only once).

•	If a defined term contains an image (usually found at the beginning, functioning as a list bullet), then when you press Enter to create a new defined term, that image will be duplicated in the new term.


Inserting tables

Tables are commonly used in Web pages to convey related information in a logical way. They can also be useful as layout tools for design purposes.

To insert a table:

•	Choose Insert Table... from the Table menu.

•	Type the number of Rows and Columns you want in the table in the text boxes.

•	Click on OK.


Formatting text

You can change the way that your text appears in a number of ways—by changing the text alignment, style, color, or font. It is generally not good design practice to get carried away with these choices: multiple changes of font or color can be distracting and reduce readability, especially for users with visual impairments. Once you find a look for your text that you are happy with, you can apply it to all the documents in your site to create a consistent design style.

  More on this topic


Aligning blocks of text

You can align blocks of text (block elements) and table cells in your Web page to the left (default), to the right, or in the center. Headings, paragraphs, and table cells are some of the elements you can align.

To set text alignment:

•	Put the insertion point in the block of text you wish to align.

•	To set the alignment, do one of:

•	Click on the [image] (Left Align), [image] (Right Align), or [image] (Center) toolbar button.

•	Press Ctrl+L (left align), Ctrl+R (right align), or Ctrl+E (center).

•	Choose Align Left, Align Right, or Align Centered from the Format menu.


Changing the text style

You can add emphasis to inline text by changing the text style. The Formatting toolbar includes buttons for bold, italic, and underline.

There are also other HTML character format elements that you can use. Emphasis (EM) and strong (STRONG) are commonly used in place of italic and bold: most browsers will display them as italic and bold but their use gives more flexibility to the browser. Teletype (TT) will be displayed in a fixed-width, typewriter-style font, such as Courier. This is useful in technical documentation: if you are going to include any instructions for viewers on your site, you can use it to indicate text to be entered. All of these text styles are available from the Format menu and the Quick Tools toolbar.

Emphasized text should be used sparingly, or it will no longer stand out. Since browsers underline text links, underline text for emphasis only in special situations where you are sure it will not be confusing.

To change text style:

•	Select the text and do one of the following:

•	Click the [image] (Bold), [image] (Italic), or [image] (Underline) button in the toolbar.

•	Press Ctrl+B, Ctrl+I, or Ctrl+U.

•	 Choose a style from the Format menu.

Each of these methods can be used to either apply or remove the chosen style: for example, if you click on [image] when the selection is already bold, the bold style will be removed.


Changing the text color

Most Web browsers will let you specify different colors for the the text in your document. You can specify the default text color for the whole document in the Page Properties dialog box , but you can also change the color for specific text in the document.

To change text color:

•	Select the text.

•	Click on the [image] toolbar button, or choose Text Color... from the Format menu; this brings up the Choose Color dialog box.

•	Choose a color from either the browser safe palette, or from a custom palette.

•	Click on OK. Your change will be reflected in the document window.


Changing the text size

You can change the size of text, as a relative value (+/-) or as an absolute value. These numbers do not represent actual point sizes, but rather a scale to be interpreted by the browser. Most browsers support font sizes between 1 to 7, with 3 being the default size. When you change the font size in HoTMetaL PRO, the size is increased or decreased.

To change text size:

•	Select the text, and do one of the following:

•	Click on the [image] or [image] toolbar button.

•	Press Ctrl+Shift+> (increase size) or Ctrl+Shift+< (decrease size).

•	Choose Increase Text Size or Decrease Text Size from the Format menu.


Changing the font

Most Web browsers can display different font faces in your page. Keep in mind that fonts and font names are not the same on all computer platforms. For example, UNIX and Macintosh users may not be able to use the same fonts as Windows users. Make sure that your pages are acceptable without the selected fonts.

To change the font of your text:

•	Select the text you want to display in a different font.

•	Pull down the menu of fonts in the Formatting toolbar.

•	Choose the font from the pull-down list. Your font selection will be reflected in the document window.


Adding common design items

This section describes some simple ways to add a little design to your Web page. More complicated methods of design (such as frames and tables) are covered later in this guide, but remember that often the simplest designs are the best.

  More on this topic


Page Properties

The Page Properties dialog lets you set background images and colors, set text colors, and give the document a title.

Backgrounds

Backgrounds are an easy way to make your Web page more interesting and give it some style. You can specify a background color for your Web page or you can use a graphic, which will be tiled—that is, repeated over and over to fill up the background—by the browser.

You can specify either a background color or graphic using the Page Properties... command. Take care to ensure that your color choices for text and background have enough contrast for readability. The background image should not contain information (such as a company or site name) that is not also included elsewhere in the document in text form.

To specify a background color:

•	Choose Page Properties... from the File menu.

•	Click on the ... button next to the Color option; this brings up the Windows Color dialog box.

•	Choose a color from the palette.

•	Click on OK.

HoTMetaL PRO will now display your color choice as the background color.

To specify a background image:

•	Choose Page Properties... from the File menu.

•	In the Image text box, type the full path and filename of the image you want to use for your background. Alternatively, you can click on Choose... to find the file.

•	Click on OK.

The background image you have selected is tiled, or repeated, as many times as necessary to fill the background.

Note: Use the Options dialog to choose whether to Show Background Images in the HoTMetaL PRO document window.

Text colors

Click on the ... buttons or enter a hexadecimal red-green-blue value in the text boxes to choose colors for:

•	Normal text

•	Links (hot text; most browsers display this text in blue by default)

•	Visited links (links that have already been accessed)

•	An active link (this is the color that the link text will at the moment that someone is clicking on it).

Document title

You should specify a title for your document—most browsers will display this text in the title bar when your document is displayed.

To specify a title:

•	In the Document title text box, type a title for your document.


Adding horizontal lines

Sometimes you may want to break your page into sections, or add some graphical relief by inserting a horizontal line across the page.

To insert a horizontal rule:

•	Choose Horizontal Rule from the Insert menu. A horizontal line appears across the page at the insertion point.

Double-click on the line if you want to set properties for the rule.   The following properties are available:

•	SIZE – Height of the rule in pixels.

•	WIDTH – Width of the rule in pixels or percentage of screen width (percentage recommended).

•	NOSHADE – Indicates whether the rule has a 3D or flat look.

•	SRC – Specifies a URL to an image that will be displayed in place of the rule in browsers that support this.

•	ALIGN – Specifies left, center or right alignment for the rule.


Line breaks

Occasionally, you may wish to make the line break in a specific spot and wrap to the line below. This is sometimes the case with especially long headings.

To insert a line break (BR element) into your document:

•	Press Shift+Enter.


Completing your page

You can save your Web page at any time using Save or Save As in the File menu. However, there are a number of recommended steps you should go through before considering your page complete and ready for public viewing:

•	Give the document a title.

•	Validate for accessibility to ensure that visitors using different browsers and various assistance tools can easily access this document.

•	Validate the HTML to ensure that the document markup is not invalid in any way. Invalid markup can result in browsers not displaying the document properly.

•	Preview your document in one or more browsers to see how it looks.

  More on this topic


Validating for accessibility

To ensure that your document is accessible to everyone, including users with disabilities and users of text-only browsers, choose Check Accessibility from the Tools menu.

To check your document for accessibility:

•	Choose Check Accessibility from the Tools menu. HoTMetaL PRO checks your document against a set of accessibility guidelines. If your document does not meet these guidelines, a message appears with a summary list of the accessibility problems.

•	Click on OK. A succession of dialog boxes appear, one for each problem. Some problems can be solved immediately using tools in the dialogs. If the problem is more complex, a textual warning appears which explains the problem.

If your document does not pass the accessibility check, it does not mean that the HTML markup is incorrect. It is advising you that your document could be marked up to be more accessible to people with disabilities. For information about creating Web pages that can be accessed by everyone, see Validating for accessibility in the online help.


Validating your page

You can use the Check HTML command in the Tools menu to verify that the markup in a document is correct and complete. If the validation process finds errors in the document, the Validation Log appears, displaying a list of errors

To check your document for valid HTML markup:

•	Choose Check HTML from the Tools menu, or press F9.

•	If the Validation Log is displayed, double-click on each error message to move the insertion point to the location of the error. Correct the errors and validate again. .

•	If the document is valid but contains HTML extensions, the Validation dialog box appears, giving a list of extensions used. Click on the More... button to see which extensions used in your document may not be supported by all browsers.

 For more information about HTML rules, see Creating valid HTML in the online help.


Previewing your document

You can preview your document in a Web browser to see what the final product will look like.

To preview a document:

•	Select Page Preview from the View menu or select the Page Preview button, the rightmost button in the [image] group in the lower left corner of the HoTMetaL PRO window.

Or:

•	Click on the toolbar button containing the icon for your Web browser.

If your document has not been saved, you will be prompted to save and preview the document, save a temporary file and preview it, or cancel the operation.

If no browser has been chosen, or you wish to choose a new browser:

•	Click on a blank toolbar button.

 The Choose Browser dialog box appears.

•	Select the path and filename for your browser and click on Open.

You can also preview a document, and add or delete a browser, by choosing Preview in Browser... from the File menu, or pressing Ctrl+M.

Note: If you are previewing the document through a server such as HoTMetaL Personal Server, you may need to configure HoTMetaL PRO to submit the document's URL in a different form. This is done through the  'Server' Options tab.


Closing the document

To close a document:

•	Choose Close from the File menu, or Close All Files from the File menu if multiple documents are open. If any changes have been made to the document since the last time it was saved, you will be prompted to save the changes before closing the file.


Exiting HoTMetaL PRO

To exit HoTMetaL PRO:

•	Choose Exit from the File menu. The application will close. If any open files have been changed since the last time they were saved, you will be prompted to save them before exiting.


Printing documents

Printing is available from all three document editing views—WYSIWYG, Tags On, and HTML Source. The document will be printed as it appears in the current view—with tags icons in Tags On view, and as source code in HTML Source view.

To print from HoTMetaL PRO:

•	Choose Print... from the File menu.

To print an or HTML file from a browser:

•	Choose Page Preview from the View menu

•	Click in the browser window and choose Print from the pop-up menu.

Alternatively, you can launch an external browser and print from that application.

HoTMetaL PRO print options

You can specify headers and footers for pages printed from HoTMetaL PRO:

•	Click on Options in the Print dialog.

The six text boxes in the upper part of the dialog box enable you to describe the page header and footer by specifying the text of their left, middle, and right components.

There are a number of special expressions you can put in headers and footers. You can insert these strings quickly by putting the insertion point inside the desired text box, and then clicking on the corresponding button:

•	&[Date] – prints the system date ( [image])

•	&[Time] – prints the system time ( [image])

•	&[File] – prints the file name ( [image])

•	&[Path] – prints the full path and file name ( [image])

•	&[Modified] – prints the file's modification time ( [image])

•	&[Page] – prints the page number ( [image])

You can choose a font and font size for the header and footer from the drop-down lists provided.


Inserting links

What's covered in this chapter

Links are key features of HTML pages because they enable you to link other documents to your pages and insert graphics and multi-media files. A URL (Uniform Resource Locator) is the part of a link that gives the location of the file that the link points to (and possibly a specific place in that file).

Some things that you can do with links are:

•	Create a link to another page .

•	Insert an image in your page .

•	Create a link to a specific location in a page (bookmark).

•	Create a link to an e-mail address .

•	Create a link to a file on your local system

•	Drag and drop a link from another application

This section also has background material  on different kinds of URLs.

HoTMetaL PRO makes it easy to create and edit links. There are several ways to do this:

•	You can create a hypertext link  to a file, using the Link... command in the Insert  menu. With this command, you can link to files on your system or to remote files.

•	You can  insert an image  using the Image... command in the Insert  menu.

Dragging and dropping links

•	You can make a link to a document or image on your system by dragging and dropping its icon from Windows Explorer or the Desktop into the HoTMetaL PRO document window.

By default, dragging and dropping will create a relative  URL if the document that you are working on has been saved at least once (that is, it has an actual filename), and will create an absolute (file:///) URL if the file you are working on has never been saved. The first time you save a file, any file:/// URLs can be converted to absolute URLs.

You can configure HoTMetaL PRO to always create absolute  URLs when you drag and drop a file.

•	You can copy a link from a file being displayed in a browser by dragging and dropping the link into the HoTMetaL PRO document window.

If you drag a hypertext link, HoTMetaL PRO will create a link whose URL is the same as the URL of the link in the browser, and whose default text is the same as the text of the URL.

From Netscape Navigator and Internet Explorer, you can also drag the 'Quick Link' icon (just to the left of the URL in the browser window) into the HoTMetaL PRO document window. This creates a link to the page currently being displayed in the browser.

You can drag images from Microsoft Internet Explorer into the HoTMetaL PRO document window. This creates a link to a copy of the image in the Temporary Internet Files folder, which is contained in the Windows folder. You will probably find it more useful to copy the image from that folder into one of your working folders, and modify the link accordingly.

•	If you paste or drag and drop some text that starts with 'http://' from another application into the HoTMetaL PRO document window, it will automatically be converted into a link.

  More on this topic


Inserting hypertext links

A hypertext link is one in which the user clicks on some text or an image and the browser responds by displaying another document, location (bookmark), or image. To insert this kind of link (sometimes called an anchor):

•	Enter the text or image that will represent the the link. If you don't highlight some text or image before you create the link, the URL will be used as the default link text; you can later change this text if you wish.

•	Highlight that text or image.

•	Do one of:

•	Click on the [image]   toolbar  button.

•	Press Ctrl+K.

•	Choose Link... from the Insert menu.

 The Insert Link dialog box appears: in this dialog, you can enter a URL specifying a file, a bookmark in a file, or both. You can also indicate which frame (in a frames document) that you want the document to be displayed in. (Inserting a link creates an 'A' (anchor) element in your document.)

Linking to a file

To specify a file:

•	Enter the file's URL in the File or URL text box. You can enter any kind of URL here: an absolute or relative URL to a file on the WWW or on your local system.

You can choose a file on your local system by clicking on Choose File.... By default, this will create a relative URL if your document has been saved at least once; if your document has never been saved an absolute URL to the location on your system will be created.

You can configure HoTMetaL PRO to always create absolute  URLs when you choose a file on yoursystem.

When you have entered the URL, you can, if you wish, add it to the HoTMetaL PRO hotlist by clicking on Add to Hotlist.... You can choose a URL from your HoTMetaL PRO hotlist by clicking on Hotlist....

Linking to a bookmark

If you want the link to point to a bookmark (a specific location in the document that you're linking to):

•	Enter the bookmark at the end of the URL you entered in the File or URL text box, separated from it by a '#' character. If you didn't specify a file, the bookmark will be the only thing in the text box.

 Here are two examples of URLs with bookmarks:

http://www.softquad.com/authors.htm#orwell

#madrid

The HoTMetaL PRO Insert menu also has the commands Bookmark... and Link to Bookmark... for creating and linking to bookmarks.

Linking to a frame

If you want the file that you're linking to to be displayed in a particular frame in a frame document when the user clicks on the link:

•	Enter the frame name in the Target Frame text box.

If a frame of that name is not being displayed by the browser when the link is clicked on, the linked document will be displayed in the same frame as the current document.

  More on this topic


Creating a link to a file in your project

Links to files in your projects, which will eventually be moved to a server, can be either relative or absolute. You should choose whichever type suits your project and style of working.

In general, you should use relative links, especially if one or more of the following are true:

•	You know what the folder structure of your site will be.

•	You've created a mock-up on your local system of what the site will look like when it's moved to the server.

•	Most of the structural changes will be 'incremental'—they will add to the current structure rather than rearranging it.

A disadvantage to using absolute links while you're developing your site is that it's difficult to preview your work in a browser until the links work.

To create a link:

•	Enter the text or image that will represent the the link.

•	Highlight that text or image.

•	Do one of:

•	Click on the [image]   toolbar  button.

•	Press Ctrl+K.

•	Choose Link... from the Insert menu.

•	Enter the URL in the File or URL text box.


Creating a link to a file on another Web site

The URL for a document at another site has to be an absolute URL: it must contain a scheme (http, ftp, etc.) and site address, followed by folders, a filename, and a bookmark if necessary.

•	Enter the text or image that will represent the link.

•	Highlight that text or image.

•	Do one of:

•	Click on the [image]   toolbar  button.

•	Press Ctrl+K.

•	Choose Link... from the Insert menu.

•	Enter the URL in the File or URL text box.


Creating a link to a file on your local system

You can create a URL that refers explicitly to a location on your local network, hard disk, CD, or floppy drive. For example:

file:///c|/data/orwell/homage.htm

 This kind of URL is useful only in certain circumstances: if you have to make a link to a file on another drive on your network, or if you don't intend to publish your pages to a server. If you do intend to publish your files, it's best to use either relative URLs or http-style absolute URLs.

•	Enter the text or image that will represent the the link.

•	Highlight that text or image.

•	Do one of:

•	Click on the [image]   toolbar  button.

•	Press Ctrl+K.

•	Choose Link... from the Insert menu.

•	Enter the URL in the File or URL text box. The URL has the following structure:

1	The  file scheme, followed by the characters ':///'.

2	The drive name: replace the ':' in the drive name with a vertical bar, for example, 'c|' instead of 'c:',

3	The path/filename. You should separate the files and folders with forward slashes, '/'.

4	A bookmark, if desired.

You can also choose a file by clicking on the Choose... button. By default, however, this will create a relative URL if the current file has been saved at least once; if you would like HoTMetaL PRO to always create absolute  URLs when you choose a file:

•	Edit the file hmpro6.ini, in the HoTMetaL PRO folder, with a text editor such as Notepad.

•	Add the line:

urls_default_to_relative=false

If a setting for urls_default_to_relative is already present, change true to false.

•	Restart HoTMetaL PRO.

Now you can use Choose File... to create file:/// URLs.

See the section Changing your URLs for the Web  for information on how to convert 'local' URLs to URLs for the Web.


Inserting images

To insert an image using the toolbars or menu commands:

•	Place the insertion point at the location where you want the image to appear in the document.

•	Click on the [image] (Insert Image) toolbar button or choose Image... from the Insert menu.

The Image Properties dialog box appears.

•	Enter the URL for the image in the Image File text box, or click on Choose... to browse for the image file.

You can view the selected image file in the preview window of the Choose Image File dialog.

You can also specify the image properties.


Using the URL hotlist

HoTMetaL PRO lets you maintain a hotlist of frequently used URLs. When you need to insert one of these URLs, you can just pick it from the list instead of having to enter the information over again.

To add the current URL to the hotlist:

•	Do one of:

•	Click on the [image]   toolbar  button.

•	Press Ctrl+K.

•	Choose Link... from the Insert menu.

•	Enter the URL in the File or URL text box.

•	Click on Add to Hotlist....

You'll then get a dialog box that displays the URL and lets you enter a description. This description is how the URL will be displayed in the hotlist dialog box.

•	Enter the description. If you leave the description blank, the URL itself will be used as the description.

•	Click on OK.

To pick a URL from the hotlist:

•	Click on Hotlist... in the Insert Link dialog box.

A dialog box will appear, displaying the description of each URL in the hotlist.

•	Double-click on the URL you want. Alternatively, you can select a URL and click on OK.

To delete a URL from the hotlist:

•	Click on Hotlist... in the Insert Link dialog box.

•	Select the URL that you want to remove.

•	Click on Delete from Hotlist.

To append a Mosaic hotlist or Netscape Navigator bookmarks file to the HoTMetaL PRO hotlist:

•	Click on Hotlist... in the Insert Link dialog box.

•	Click on Append Hotlist... in the dialog box that appears.

•	Choose the hotlist or bookmark file that you want to append.

•	Click on OK.


Pointing to a specific location (bookmark)

Links can point not only to a document but also to a specific location (bookmark) in the document.

To set up this type of link you have to do two things:

1	Create the bookmark, using the Bookmark... command in the Insert menu.

2	Create a link to the bookmark, using the Link to Bookmark... command in the Insert menu.

Creating a bookmark

To create a bookmark:

•	Highlight some text at the location you want to link to. (Highlighting text is not mandatory, but some browsers will not be able to jump to the bookmark unless it contains some text.)

•	Click on the [image] button in the Quick Tools toolbar, choose Bookmark... from the Insert menu, or press Ctrl+G.

•	Enter a bookmark name of your choice in the dialog box that appears. Bookmark names typically consist of one word, but you can enter more. You should not use the same bookmark name twice in the same document.

•	Click on OK.

Creating a link to a bookmark

To create a link to a bookmark in an open document:

•	Highlight the text of the link.

•	Click on the [image] button in the Quick Tools toolbar or choose Link to Bookmark... from the Insert menu.

•	Choose the file containing the bookmark from the list of open files. The Bookmarks in file list will display all of the bookmarks in the file you chose.

•	Click on a bookmark in the list.

•	Click on OK.

To create a link to a bookmark in a document that isn't open:

•	Do one of:

•	Click on the [image]   toolbar  button.

•	Press Ctrl+K.

•	Choose Link... from the Insert menu.

•	In the File or URL text box, enter the URL for the document you want to link to.

•	Enter the bookmark name at the end of the URL you entered in the File or URL text box, separated from it by a '#' character.

Here are two examples of URLs with bookmarks:

http://www.softquad.com/authors.htm#orwell

#madrid


Linking to an e-mail address

You can create a link to an e-mail address so that:

•	A user can click on a link in a browser and open an e-mail editing window.

•	An online form can be mailed to an e-mail address.

The URL for this kind of link consists of the mailto scheme followed by a colon, ':', and then the e-mail address. For example:

mailto:charles@windsor.org

To create a link that brings up an e-mail editing window:

•	If you've already entered the text or image that represents the link, highlight it.

•	Do one of:

•	Click on the [image]   toolbar  button.

•	Press Ctrl+K.

•	Choose Link... from the Insert menu.

•	Enter the URL in the File or URL text box.

Note: Some browsers can read a 'subject line' from the URL. For example, 'mailto:charles@windsor.org?subject=Hi there' would generate a subject line of 'Hi there'.

Some browsers do not support mailto but will at least display the e-mail address. Also, in order for this feature to work if your system is behind a firewall, you may need to configure your browser to use the correct proxy server. See your system administrator or browser documentation if this is the case.


Updating links when you save a file

If a document contains relative links, and you save it to a different folder, some relative links may become broken.

To help you avoid this, the Save As dialog has three options for what to do with relative links:

•	Update URLs – any relative URLs in the document will be updated so that they still point to the same linked files, even though the current document is in a new location.

•	Copy Items – instead of changing the URLs, HoTMetaL PRO will copy the files that those URLs point to so that they are in the same locations relative to the new location of the current document. This option works only for first-level files, that is, linked files that are in the same folder as the current document.

•	No Change – performs a normal Save As. Relative URLs may become broken. No Change is the default option.

If you are saving a file for the first time, and you choose Update URLs or Copy Items, any file:/// URLs in the document will be converted to relative URLs, provided that the linked files and the current file are on the same disk drive (both on the C: drive, for example).


Displaying links in the document window

In Tags On view, you can quickly see which URL a link points to by moving the mouse cursor over the start- or end-tag of the link element, and then reading the tag tip. This shows all attributes that have a value. Some common attributes that contain URLs are the HREF attribute of A, the SRC attribute of IMG, and the HREF attribute of LINK. A tag tip will also appear over an image in WYSIWYG view.


Understanding URLs

This section gives you some of the background information for understanding URLs. If you are already familiar with this subject, you can skip over it.

The parts of a URL

 A URL can have the following parts:

•	A scheme that specifies how the browser should retrieve the file. Some common schemes are:

•	http: indicates an address on a Web server.

•	mailto: indicates that the URL specifies a mail address

•	file: indicates a file on a local filesystem.

•	ftp: indicates an address on an ftp server.

•	gopher: indicates an address on a gopher server.

•	A site address (for example, www.softquad.com) that specifies which site (server) the file is located on.

•	The site address can be followed by a 'port number', for example: 'www.sq.com:8888'. A port number is required if the Web server is not running on the default port (that is, 80).This normally occurs only if the site has more than one server running on it, so most likely you do not need to specify a port number.

•	A path, a sequence of folders, usually ending with a filename. This specifies the file to be retrieved.

•	A bookmark, that is, a reference to a specific location in the document that the URL is pointing to.

•	A query. If the URL points to a program instead of a document, you can attach a query string that specifies some information that the browser will send to the program.

Putting it all together

These components have to be arranged in a way that a Web browser will understand:

•	The scheme is separated from the site address by the characters '://'.

•	The site address, folder names, and file name are separated by forward slashes, '/'.

•	If the URL contains a bookmark, it's separated from the rest of the URL by a '#' character.

•	If the URL contains a query, it's separated from the rest of the URL by a question mark, '?'.

Here are some examples:

http://www.softquad.com/

http://www.softquad.com/whatsnew.htm

http://www.softquad.com/authors/orwell.htm#school

What kind of URL should I use?

Most components of a URL are optional: for example, you can create relative URLs that omit the scheme and site address. The kind of URL you use generally depends on where the document that you're linking to is located: on your own site or project, on another site, or on your hard disk or local network.

Mocking up your site

You'll find it easier to keep track of your links if, on your local disk, you create a mock-up of the files that you intend to publish to your Web or intranet server. If you do this, the links you create now will be less likely to break when you move your files to the server. It will also be much easier to move the files to the server using the HoTMetaL PRO publishing function.

  More on this topic


Relative and absolute URLs

URLs can be divided into two groups: absolute URLs and relative  URLs.

Absolute URLs

An absolute URL is one that contains at least a scheme (such as http) and a site address (such as www.softquad.com). It can contain other components too, such as the folder path and filename, but it must have the scheme and site address in order to be an absolute URL.

The filename can be omitted from an absolute URL. In this case the URL implicitly refers to the file index.html on the server or folder that is specified in the URL. The URL http://www.softquad.com/press means 'the file index.html in the folder press on the www.softquad.com server'. The URL for a site's home page often omits the path and filename: for example, http://www.softquad.com/ is the URL for SoftQuad's home page.

Relative URLs

A relative URL is one that doesn't have a scheme and site address; other components may be absent too. In this case the browser has to supply the absent information in order to know where to look for the file that the URL is pointing to. Normally the browser gets the absent information from the URL of the document that contains the relative URL.

 For example, suppose the document http://www.sq.com/doc/tutorial.htm contains a link to authors/orwell.htm. This URL contains a path and filename, but no server location. In this case, the browser will search for the document on the same server and folder as tutorial.htm.

If you are linking to a file in the same project it's usually better to use a relative URL, for the following reasons:

•	If you move all the files to a different location (for example, when you publish them to a web server) but keep the same  folder  hierarchy, you don't have to revise the URLs.

•	Less typing is required to enter them.

•	The same file referred to by a relative URL can be accessed by different schemes (for example, both http and ftp).


Configuring HoTMetaL to create absolute URLs

As long as the current document has been saved at least once, HoTMetaL PRO creates relative URLs by default when you create a link by dragging and dropping, or with the Choose... button in the Insert Link dialog box.

If you would like HoTMetaL PRO to always create absolute URLs in these situations:

•	Edit the file hmpro6.ini, in the HoTMetaL PRO folder, with a text editor such as Notepad.

•	Add the line:

urls_default_to_relative=false

If a setting for urls_default_to_relative is already present, change true to false.

•	Restart HoTMetaL PRO.


Understanding relative URLs

When the browser fills in the absent information in a relative URL, it usually gets this information from the URL of the document that contains the relative URL (this URL is called the base URL). The only exception to this is when the document contains an element called BASE, which specifies the base URL explicitly.

A relative URL can start with one of the following:

•	A file or folder name.

•	A single slash: '/'.

•	A double dot '..'.

•	A dot '.'.

•	A double-slash: '//'.

URLs that start with a folder or file

If the relative URL starts with a folder or filename, then the browser will look for the folder or file in the same folder as the current document. For example, suppose the relative URL is:

madrid.htm

The browser will look for the file madrid.htm in the same folder as the current file.

If the relative URL is:

orwell/homage.htm

 then the browser will look for the file homage.htm in a folder called orwell that is in the same folder as the current file.

URLs that start with a slash

If the relative URL starts with a single forward slash, '/', then the scheme and the site address are absent. Both of these will be inherited from the current document (that is, the browser will look for the specified folder and file at the top level of the server). For example, suppose the current document is located at:

http://www.softquad.com/authors/contents.htm

 and it contains the relative URL:

/images/orwell.gif

 The browser adds the scheme and site address to the beginning of the relative URL to get:

http://www.softquad.com/images/orwell.gif

URLs that start with '..'

The characters '..' at the beginning of a relative URL mean 'go up one folder level'. This kind of URL is interpreted the same as one that starts with a file or folder, except that the browser starts looking one level up from the current file. For example, suppose the current document is located at:

http://www.softquad.com/authors/english/index.htm

 and it contains the URL:

../french/voltaire.htm

 Instead of looking for the folder french in the current folder (english), the browser looks one level up, to the folder authors; then it looks for the folder french, and then for the file voltaire.htm. In this context, the relative URL is equivalent to:

http://www.softquad.com/authors/french/voltaire.htm

There are a couple of less common cases:

•	If the relative URL starts with '//', then the only thing absent is the scheme (http, etc.). In this case the browser uses the same scheme as it did for the current document..

•	The characters './' at the start of a relative URL means 'the current folder'. When the browser is interpreting a relative URL, the characters './' will simply be ignored.


Publishing to a site

What you'll learn in this chapter

 When you are editing files, you will often keep them in one or more folders on your local PC: we will refer to these files as 'local files'. At some point you will want to publish these files. HoTMetaL PRO enables you to open, edit, and publish files to two kinds of sites: network and remote.

 A network site is one that you are connected to via a local network; it could even be located on your PC. You might publish to a network site if you are, for example:

•	Publishing to an intranet.

•	Publishing to an NT server that has been set up as a mapped network drive.

•	Publishing to an in-house 'development server' before FTPing your site to a remote Web server.

•	Using a tool such as NFSMaestro to map UNIX file systems as network drives.

 A remote site is not necessarily physically remote, but rather is one that you connect to via FTP. This is typically how you would transfer files to a live Web server.

HoTMetaL PRO's remote connectivity makes it easy to drag and drop files and folders to and from your PC and other sites, and publish files and folders by synchronizing local files with network and remote sites. You'll learn about the following:

•	Setting up a site with the Site Setup wizard.

•	Advanced setup options:

•	Configuring the FTP server.

•	Setting up a firewall.

•	Specifying an HTTP server.

•	Creating file mappings.

•	Editing remote files.

•	Synchronizing files (publishing).

You can define one or more sites for remote and network editing. The site definition contains information about the site name, local and root folders, FTP server, and so forth.

  More on this topic


Setting up a site

HoTMetaL PRO's Site Setup wizard enables you to set up a site quickly. In each panel of this wizard, you can click on an Advanced button that enables you to carry out further configurations. Click on this button if you need to:

•	Open files by dragging them from a browser into HoTMetaL PRO; this requires you to specify an  HTTP server.

•	Define server aliases (required when the physical folder paths of some parts of your site do not correspond to the folder paths in the URLs used to access them).

•	Create 'root absolute' URLs with HoTMetaL PRO—URLs that start with a leading slash, implying that the locations that these links specify are relative to the server root.

•	Create filters that exclude certain file types from synchronization.

You can define two types of sites: sites that you connect to via FTP ('remote' sites), and sites that are on your local PC or connected to it by a network ('network' sites).

To define a new site of either type:

•	Choose Sites... from theTools menu. This starts the Site Setup wizard.

•	If this is the first time you've used the Site Setup wizard, you'll see the Introduction panel, which explains the purpose of the wizard. If you wish, you can turn on Don't show this message again to disable this panel the next time you use the wizard. Click on Next> to display the Choose a Site panel.

  More on this topic


Choose a Site

In the Choose a Site panel of the Site Setup wizard, you can choose which site to configure. You can enter the name of a new site, or choose a name from the list of existing sites. This name will represent the site in the Resource Manager Remote or Network tab.

•	Choose a site name.

•	Click on Next> to display the Choose Connection Method panel.


Choose Connection Method

In the Choose Connection Method panel of the Site Setup wizard, you specify how you connect to your site. The two options are:

•	You connect to the site using FTP. This is how you would normally connect to a remote Web server.

•	The site may be on your local PC, or connected to it via a network. This may be the case if you are publishing a site that is not yet ready to go live, or that you wish to transfer to your server by some other method.

•	Choose a connection method.

•	Click on Next> to display the Local Root Folder panel.


Local Root Folder

In the Local Root Folder panel of the Site Setup wizard, you enter the folder on your local PC or network that contains the files that you want to synchronize with (publish to) your network or remote site.

•	Enter a local root folder.

•	Click on Next>. If you chose the 'FTP' option in the previous panel, the next panel will be the FTP Settings panel; otherwise, you will next see the Site Default Folder panel.


FTP Settings

In the FTP Settings panel of the Site Setup wizard, you enter some information that HoTMetaL PRO needs in order to connect to your site via FTP. This panel appears only if you are defining a remote site,

•	Enter your site's Host Name or IP address, such as ftp.mysite.com or 192.168.1.78.

•	Enter your User ID and Password. For anonymous connections, turn on the Anonymous check box.

•	This panel has a More FTP Settings button that displays another dialog box that enables you to further configure your FTP settings, and specify a firewall server.

•	Click on Next> to go to the FTP Default Folder panel.


FTP Default Folder

If you have chosen FTP as your connection method, then, in the FTP Default Folder panel of the Site Setup wizard, you enter the Home Folder, the folder that will be opened initially when you connect to the site. This will be the top-level folder displayed in the FTP Neighborhood when you access the site, and the folder that your files are published to..

You can click on the ... to choose a folder. When the Browse for Folder dialog box opens, it displays your home directory. If you want to select a folder above your home directory, click on the 'up arrow' button.

On a UNIX/Linux server, enter public_html to open the user's webspace, or leave the text box blank to open the user's login directory; on a web hosting provider, you can leave the text box blank—this will open the webspace. A folder path that does not start with a '/' will be interpreted as relative to the login directory or webspace.

You can also enter a specific folder to restrict this site to part of a larger site.

•	Click on Next> to go to the Finish panel.


Site Default Folder

If you have chosen 'network' as your connection method, then in the Site Default Folder panel of the Site Setup wizard, you enter the Default Folder, the folder that will be opened initially when you connect to the site. This will be the top-level folder displayed in the Network tab when you access the site. A folder path that does not start with a '/' will be interpreted as relative to the login directory.

•	Click on Next> to go to the Finish panel.


Finish Site Setup

Now that you've finished setting up your site, you have the option of synchronizing (publishing) immediately. This operation will synchronize the files in your local folder with your remote or network site's root folder. If you want to synchronize now, turn on the Synchronize check box and click on Finish. This will display the Synchronization dialog, which gives you some further synchronization options.


Defining a site: advanced options

The following steps define a site:

Note: You may need to get some information from your Internet Service Provider or Network Administrator to configure remote sites.

•	Choose Sites... from the Tools menu to start the Site Setup wizard.

•	In the Choose a Site panel, enter the site name.

•	Click on Advanced.

•	In the Save Changes? dialog, click on Yes.

•	Choose the type of site—Remote or Network.

•	Remote sites only: Use the FTP General tab  to specify the FTP server for your site.

•	Use the HTTP tab  to specify the HTTP server for your site.

•	Remote sites only: If you need to go through a firewall in order to contact your site, use the FTP Firewall  tab to specify the firewall settings for the FTP connection.

•	Local sites only: use the Default Folder tab to specify the root folder for the site.

•	If you want to define server aliases, use the Mappings tab .

•	Click on OK or Apply.

 You can organize your sites by grouping them in folders: right-click on FTP Neighborhood and choose New Folder. Then right-click on the folder and choose Add Site... to create the sites inside the folder.

Extensions for ASCII FTP

By default, HoTMetaL PRO uses binary mode for FTP transfers. To specify ASCII mode for transferring files with certain extensions, enter the extensions in the ASCII FTP Extensions list, in the form '*.ext'.

  More on this topic


Specifying an FTP server

Use the FTP General tab in the Site Properties dialog or the General tab in the Advanced FTP Settings dialog to specify your remote site's FTP server:

The following settings are not present in the Advanced FTP Settings dialog, but are available in the FTP Settings panel of the Site Setup wizard:

•	Enter the Host Name/Address, for example ftp.mysite.com, or 192.168.2.1

•	 If you know the Host Type, you can choose it from the drop-down menu. HoTMetaL PRO will recognize the most common host types. If your host is not recognized, then the Remote tab will not display a listing of the files and folders in your site. in this case you need to configure HoTMetaL PRO to recognize the host.

•	Enter your UserID and Password. For anonymous connections, turn on the Anonymous checkbox.

•	 Enter the Startup Folder, the folder that will be opened initially when you connect to the site. This will be the top-level folder displayed in the FTP Neighborhood when you access the site.

On a UNIX/Linux server, enter public_html to open the user's webspace, or leave the text box blank to open the user's home directory; on a web hosting provider, you can leave the text box blank—this will open the webspace. A folder path that does not start with a '/' will be interpreted as relative to the home directory or webspace.

You can also enter a specific folder to restrict this site to part of a larger site.

The following settings are available in both the Site Properties and Advanced FTP Settings tabs.

•	If your FTP server requires an Account, enter it in the appropriate field. Most servers don't require this.

•	Enter the Port that the connection will use (this is usually 21)

•	Increasing the number of Simultaneous Connections (for example, to 2 or 4) increases the efficiency of the file transfers. However, some servers allow only a single connection. You will receive an error message if this is the case for your server.

•	Idle Disconnect is the number of seconds after which the connection will be terminated if there is no FTP activity.

•	Network Timeout is the number of seconds that HoTMetaL PRO will wait while attempting to establish a connection with the specified server.

•	If your FTP server supports passive transfers you can enable this transfer mode by turning on the Passive checkbox. Some firewalls require passive transfers; check with your Network Administrator if you are unsure. If you can connect to an FTP server, but there are no files or folders displayed, it may mean you need to enable passive transfers.

Note: If you are managing several domains on the same server, each domain will have the same FTP settings.


Specifying a firewall

If you connect to your remote site through a firewall, you will need to specify the firewall settings for the FTP connection.

You may need to consult your network administrator to complete this information.

•	If the Site Properties dialog isn't already visible, choose Sites... from the Tools menu.

•	Click on Advanced in any panel of the Site Setup wizard (or click on More FTP Settings in the FTP Settings panel).

•	Click on the Firewall tab.

•	Turn on Use Firewall.

•	Depending on the Firewall Type (see below), you may have to specify a Host Name, UserID and/or Password.

•	Enter the Port for the firewall.

•	Choose the Firewall Type:

•	SITE remoteHost requires that you provide a Host Name (or IP address) and UserID.

•	Transparent requires a UserID and Password.

•	USER with no logon and Proxy OPEN require only a Host Name or IP address.

•	USER after logon, USER remoteID@remoteHost fireID, USER fireID@remoteHost, and USER remoteID@fireID@remoteHost all require the Host Name or IP address, UserID, and Password.

For network administrators

If you're unsure of your firewall type, you may be able to identify it if you know the sequence of FTP commands that it uses to make the connection to the FTP server:

•	SITE remoteHost

CONNECT to proxy

USER fireID

PASS firePassword

SITE remoteHost

USER remoteID

PASS remotePassword

•	 USER after logon

CONNECT to proxy

USER fireID

PASS firePassword

USER remoteID@remoteHost

PASS remotePassword

•	Proxy OPEN

CONNECT to proxy

OPEN remoteHost

USER remoteID

PASS remotePassword

•	Transparent

CONNECT to remoteHost

USER fireID

PASS firePassword

USER remoteID

PASS remotePassword

•	USER with no logon

CONNECT to proxy

USER remoteID@remoteHost

PASS remotePassword

•	USER fireID@remoteHost

CONNECT to proxy

USER fireID@remoteHost

PASS firePassword

USER remoteID

PASS remotePassword

•	USER remoteID@remoteHost fireID

CONNECT to proxy

USER remoteID@remoteHost fireID

PASS remotePassword

ACCT firePassword

•	USER remoteID@fireID@remoteHost

CONNECT to proxy

USER remoteID@fireID@remoteHost

PASS remotePassword@firePassword


Specifying the HTTP server

If you want to be able to open files by dragging them from a browser into HoTMetaL PRO, you need to specify the HTTP location of your site (that is, the URL that you would enter in a browser in order to view the site). You can do this even if your site is a Network site, provided that it has an http URL. (Since the file locations are specified as HTTP URLs in a browser, but are transferred using FTP, HoTMetaL PRO needs to be able to relate the HTTP server to the FTP server specified in the FTP General tab.)

•	Click on the HTTP tab.

•	Enter the Host Name or IP address of the HTTP server, such as www.softquad.com, or 192.168.3.1

•	If the location is password protected (often projects are kept in a secure area while in development), you may enter a UserID and Password.

•	If you connect via a proxy server, specify whether to use the current Windows settings for the proxy server, or manually configure the server. (Normally, you can use the Windows settings.) To manually configure the proxy server, enter the host name or IP address and the port.

Note: If you are managing several domains on the same server, each domain will need its own HTTP settings.


Using server mappings

The Mappings tab of the Site Properties dialog enables you to make associations between FTP servers, HTTP servers, and local folders.

You need to use this tab in the following situations:

•	When the physical folder paths of some parts of your local or remote site do not correspond to the folder path in the URLs used to access them. In this case your Web server must be set up to use server aliases and you need to tell HoTMetaL PRO which aliases are in use.

•	If you want the Local Directory in the Synchronization dialog box to be filled in with the correct value by default.

•	If you want the URLs that you create with HoTMetaL PRO to be 'root absolute'—that is, to start with a leading slash, implying that the location that these links specify is relative to the server root. For example, /~joe/bio/face.gif

To enter server mappings:

•	If the Site Properties dialog isn't displayed, right-click on a site in the FTP Neighborhood and choose Properties from the pop-up menu.

•	Click on the Mappings tab.

•	Click on New Entry....

•	 To create 'root absolute' URLs, enter the path corresponding to the site, relative to the server root, in the HTTP text box:

•	To specify the whole site, enter '/'.

•	To indicate a specific folder, enter a string of the form /~userid/folderpath if you are on a UNIX/Linux server, or /folderpath if you are using a web hosting provider

•	 To specify the local directory for synchronization:

•	In the FTP text box, enter '/'. (In general, you would enter a folder relative to your startup folder.)

•	In the Path text box, enter the physical location (on your PC) of the files you will be synchronizing.

•	 To specify server aliases:

•	Enter the alias in the HTTP text box.

•	In the Path text box, enter the physical location (on your PC) corresponding to the aliased location.
Note: If you turn on server aliases, you will also turn on root absolute URLs, and vice versa.

•	Click on OK.


Choosing the site default folder

If you have chosen 'network' as your connection method, then in the  Default Folder tab of the Site Properties dialog, you enter the Default Folder, the folder that will be opened initially when you connect to the site. This will be the top-level folder displayed in the Network tab when you access the site. A folder path that does not start with a '/' will be interpreted as relative to the login directory.


Configuring HoTMetaL PRO to recognize a new host type

In order to be able to recognize and display a list of the files and folders in your site, HoTMetaL PRO must be able to read the file listings that your site's host computer produces. HoTMetaL PRO is configured to recognize the most common file listing formats. If the Remote tab does not display a file and folder listing and the FTP log shows that the remote host successfully returned a listing in response to the ls command, then HoTMetaL PRO cannot read the file listing for your site's host, In this situation you will need to configure HoTMetaL PRO manually to recognize your site host's file listing.

The host type configurations are contained in the file Assets\FtpHostTypes.xml; this is an XML file that you can edit in a text editor.

This file has the format:

<FtpHostTypes>

<HostType>

<Name>...Host Type...</Name>

<Format>...Format string...</Format>

</HostType>

...

</FtpHostTypes>

Each HostType element defines a host type. You can specify one format string for each host type.

•	Make a copy of the existing HostType element.

•	Enter a descriptive name of your choice for your host type inside the Name element.

•	Inside the Format element, enter a format string that matches the file listing produced by your server. The format string can have the following components:

•	%name8 – a filename of up to 8 characters

•	%ext3 – a file extension of up to 3 characters

•	%name – a filename appearing at the end of the line (that is, interpret the rest of the line as the filename)

•	%size – a file size

•	%yyyy – a 4-digit year

•	%yy – a 2-digit year

•	%mm – a 2-digit month

•	%mon – a 3-character month (Jan, Feb, ...)

•	%dd – a 2-digit day

•	%time – the time in 'hh:mm', 'hh:mmAM', or 'hh:mmPM' format

•	%dir – the literal string 'dir' or 'DIR'

•	%<dir> – – the literal string '<dir>' or '<DIR>'

•	%d – a directory, link, or file indicator in a permissions string (that is, the first character in the string—'d' for a directory, 'l' for a link, any other character for a file)

•	%s – a placeholder (ignore matching string)

The following rules apply to format strings:

•	Any other strings than those listed above will be interpreted literally.

•	The match will fail unless an exact match is found.

•	Spaces in the format string match whitespace (spaces and/or tabs) in the file listing.

•	You can use the '|' (vertical bar) symbol to indicate alternation ('or').

Here are some examples:

•	 UNIX-style file listings:

-rwxr--r-- 2 rodney doc 4096 Apr 16 01:10 birthday.htm

drwxr-xr-x 2 fred devel 9462 Sep 20 1999 scripts

These will be matched by the following format string:

%d%s %s %s %size %mon %dd %time|%year %name

(Note the use of the 'or' symbol between %time and %year: this is required because UNIX-file listings use both formats.)

•	 NT server running in DOS mode:

12-25-99 04:16PM 22835 backgrnd.JPG

12-27-99 07:03PM <DIR> temp

 These will be matched by the following format string:

%mm-%dd-%yy %time %<dir>|%size %name

(Note the use of the literal '-' character between the %mm, %dd, and %yy strings.)


Accessing sites from the Resource Manager

Remote and network sites are accessible from the Resource Manager.

•	Choose Resource Manager in the View menu to display the Resource Manager.

To open a remote site:

•	 Click on the Resource Manager Remote tab. The upper pane of the Remote tab contains an entry called FTP Neighborhood.

•	Click on FTP Neighborhood; this displays all of the defined remote sites.

•	Click on the desired site; bottom pane will display files and folders once the FTP connection has been made.

To open a network site:

•	 Click on the Resource Manager Network tab. The upper pane of the Network tab contains an entry called Network Publishing Sites.

•	Click on Network Publishing Sites; this displays all of the defined local sites.

•	Click on the desired site; the bottom pane will display files and folders once the connection has been made.


Opening a file from a site

Before you can edit files from a network or remote site, the site must be defined and opened.

 When the connection has been established, the files and folders underneath the root folder that you specified are displayed in the lower panel of the Remote or Network tab. The toolbar in this panel enables you to navigate in the remote folder structure, configure the file display, and display an FTP log. To terminate a remote connection, right-click on the site name and choose Disconnect from the pop-up menu, or click on the [image] button.

Viewing the FTP log

With remote sites, you can use the FTP log to see what is happening during the connection process, or during file transfers. The log can be especially useful for troubleshooting. To view the log:

•	Click on the [image] button in the Resource Manager toolbar.

Downloading and uploading files

You can easily move files to and from a defined site by simply dragging and dropping them to the desired location. To download a file from the Remote or Network tab (the site) to the Desktop or Assets tab:

•	 Select the file(s) you want to download.

•	Click and drag the mouse over the Desktop tab or the Assets tab; the tab is brought to the foreground.

•	Drop the selection into the tab. The file is copied.

•	To upload files, simply drag from the Desktop tab or the Assets tab to the Remote or Network tab.

Opening files on a defined site

To open a file for editing, do one of the following:

•	Right-click on the file.

•	Choose Edit File from the pop-up menu.

Or:

•	Double click-on the file.

Or:

•	 Select the file(s) in the Remote or Network tab and drag the mouse over to any part of the HoTMetaL PRO interface outside of the Resource Manager. The documents will be opened in HoTMetaL PRO. If you drag the file into an existing document, a hypertext link to the file will be created.

Or:

•	Drag a hyperlink from a browser to the HoTMetaL PRO interface:

When you open the remote file, the file itself and all files that it links to on the remote site are copied to a temporary folder at the local location. You can specify the folder to use by choosing Options... from the Tools menu, and entering the path to the folder in the General tab.

Saving to the site

 To save your changes back to the defined site:

•	Click on the [image] toolbar button, or choose Save from the File menu.
You can save all of the open files using Save All. To save a local copy in a specific location, use Save As....

When you save the file to the site, HoTMetaL PRO will also save all of the files that were linked to from your original file (if they reside in the temporary folder). You are prompted to choose whether to copy (synchronize) some, all, or none of the linked files.

•	To select or deselect individual files, click on the corresponding check box.

Or:

•	Highlight the file(s) and click on the Select or Deselect buttons.

You can choose to synchronize all of the files or none of the files by clicking on the appropriate button.

If you add linked items to a remote file (such as images, or links to local documents), you can copy these linked files to the temporary folder to ensure that they are copied to the site when you save the original file.


Synchronizing (publishing) files

The Remote and Network tabs of the Resource Manager include a utility to synchronize folders and files in defined remote and local sites with the copies on your PC. Synchronization ensures that the latest version of a given file is present in the remote or network location, the local location, or both. It also provides a way to automatically delete files that are no longer part of the site.

Publishing

 To publish a site means to synchronize from the local to remote/network versions (Local --> Remote, Local --> Network ). You can publish individual folders, or folders that are part of a project (if you have a project open, choose Synchronize from the Project menu).

While often you just want to publish files to your Website using this kind of synchronization, you can do much more than just upload and download files using HoTMetaL PRO. To synchronize any folder with a folder on a remote site:

•	In the top pane of the Remote or Network tab, right-click on the folder you want to synchronize.

•	Choose Synchronize... from the pop-up menu. The Remote Synchronization (Network Synchronization) dialog is displayed.

•	Enter a Local Directory or browse for it by clicking on ....

•	Specify the Synchronize Direction by clicking in the appropriate box:

•	Local --> Remote (Local --> Network) will ensure that all of the remote or network files are as up-to-date as their local counterparts by copying newer files from the local location to the remote or network location.

•	Local <-- Remote (Local <-- Network) will copy newer files from the remote or network location to the local location.

•	Local <--> Remote (Local <--> Network) will ensure that the newest files are copied to both locations.
Note: Because of the way HoTMetaL PRO determines time stamps, you may experience difficulty synchronizing to a remote location for which you do not have write permission. This is not very common.

•	Click on Synchronize to synchronize the files using the default settings.

The list of files to be transferred or deleted is displayed. You can select any files to exclude from the synchronization operation before proceeding.

•	Click on OK.

•	A progress bar will show the overall synchronization progress and the progress for each individual file.

When the synchronization process is completed, you can view the synchronization log. If you want to view the log without actually synchronizing the folders, turn on Don't carry out actions, generate log only.

You can customize the synchronization behavior in many ways, including filtering files and setting options for the transfers.

  More on this topic


Setting filters for synchronization

When you synchronize local files with a network or remote site, there may be certain types of files that you don't want to synchronize (for example, if you've created projects in HoTMetaL PRO, you don't want to upload the *.hpp and *.hmp files that manage the project). The Filters tab of the Site Properties dialog enables you to specify files that will be excluded from the synchronization process.

File extensions

 To exclude files with certain extensions from synchronization:

•	Enter the file extension pattern (including an asterisk, for example, *.hpp) in the text box provided.

•	Click on Add.

To exclude orphan files (files that are not linked to by any files in the current project):

•	Turn on the Don't synchronize orphan files text box.

Note: You must be synchronizing from a project to be able to exclude orphan files.


Synchronization options

Specify Synchronize Options by choosing any of the following:

•	Delete files not in source: this option ensures that the destination copy is 'clean' by deleting any files that are not in the source version of the folder or site. 'Source' refers to the origin of the files specified by Synchronize Direction. Use caution when selecting this option since the deletions are not recoverable.

•	Only update existing files in destination: this option updates only files that are common to both the source and destination folders.

Source	Destination	Updated?
file1.htm		no
file2.htm	file2.htm	yes
file3.htm	file3.htm	yes
	file4.htm	no
•	Force update of destination: transfers all of the source files (depending on which of the other options you have selected) regardless of the timestamps on the destination files.

•	Specify File Filters (these default to the options set for the entire site, you cannot edit the filters from this dialog):

•	Turn on Skip Orphans to exclude orphan files (those not linked to the project) from synchronization.

•	Turn on Skip Patterns to exclude from synchronization files that match any of the filename patterns specified in the File Filters tab of the Site Properties dialog. (You can click on ... to see the list of patterns.)


Managing your Website

What you'll learn in this chapter

This chapter introduces site management in HoTMetaL PRO. In this chapter, you will learn how to do the following:

•	View the files and folders in your project.

•	View your project as it would appear on the WWW.

•	View all links into and out of a particular file

•	Set options for your displays.

•	Move, copy, delete, and rename files and folders.

•	Launch Web browsers from HoTMetaL Pro.

•	Create a new project , open an existing project , and add files to projects .

•	Create new links between files by dragging and dropping , and preserve links when you move, copy, delete, and rename files .

•	Change links for publishing .

HoTMetaL PRO provides site management functions that manage files and links between files. A collection of files is called a project. Site management refers to operations that HoTMetaL PRO performs to help you keep track of, edit, and manipulate files and links in a project. HoTMetaL PRO uses four windows to display the results of site management operations. These windows are displayed via commands in the View menu, and are explained later on in the chapter.

 You can carry out the following site management functions:

•	Move and rename files, and have the links to the files automatically updated to reflect the new names and locations of the files.

•	Examine your project in different ways to see how it is put together: view your project's links or the actual structure of its files and folders.

•	Add new files to your project, or create whole new projects.

•	Copy your files quickly and easily to a different computer (server) where they can be seen on the World Wide Web. (This is called synchronizing.)

  More on this topic


Creating new projects

To create a project based on an existing set of HTML files:

•	 Choose New... from the File menu, and then choose Project From File... from the fly-out menu. A dialog box in which you specify a root page (home page) for the new project appears.

You must specify the root page so that HoTMetaL PRO can build different views of the project. The root page is the starting page for the Web View; it is generally the page where many links to other pages are found. This file can be an index page, a table of contents page, or a welcome page in a group of HTML documents. Often, the root page of a project has a name such as index.htm, default.htm, or home.html.

•	Choose the root page for the project.

•	Click on Open to import the project and build the views.

When you create a new project, two files are created that store the information about the home page of the project, the link structure of the project, which files have been published, what Pockets have been created, and so on. These files have the same name as the root page of your project, with different file extensions (.hpp and .hmp). You should not edit these files directly.


Displaying your project

The main purpose of site management is to display and manage your project. To understand how the site management functions let you do that, let's take a look at the different site management windows.

The results of site management operations are displayed in four separate windows; none of the windows are available if no project has been loaded.

•	The Project tab in the Resource Manager displays the files and folders in your project.

•	The Web View window indicates the validity of links in your document, displays the shape of your project, and helps show you the route that users will follow when they access your information.

•	The Page Links window shows a quick summary of all of the links going into and coming from a particular file.

•	The Pocket View window shows user-selected groups of files. See Using Pockets to manage files in the online help for more information.

The different view windows can be docked, undocked, and moved around the screen. Any view window can be displayed as a document window, which will be tabbed if workbook mode is turned on:

•	Right-click on any edge of the view window.

•	Turn off Docking View in the pop-up menu.

The site management windows show the same project in different ways: you can see files, links, or selected files depending on whether you are looking at the Project tab, the Web View window, Page Links window, or Pocket View window. As well, when you click on a particular file in any window, the file will also be selected in the other windows. For example, if you select a file in the Pocket View window, the file will also be selected in the Web View window if it is visible, and the Web View will rotate to show the selected file.

You can open or close one or more views by selecting or de-selecting the desired views from the View menu. You can have one or more different views open at once. To close an open view, click on the view's [image] button.

You can resize the windows by moving your mouse cursor over the separators between the windows. When the cursor changes to a double-headed 'size' arrow, drag the separator by clicking the mouse button and holding it down as you move the mouse.

  More on this topic


Window commands

Right-clicking on a file in any site management window brings up a pop-up menu that lets you edit or browse the file, change view window options, fix broken links, show titles, show duplicate links, change the font for the window, and display the Windows Properties dialog. There are other commands that are specific to the various windows and views: look in the sections on the Project tab, Pocket window, Web View window, and Page Links window for the commands that are specific to each.

Launching an editor or browser

Edit File opens the file in the HoTMetaL PRO document window, the cascading styles editor, or other editor registered for the file type in question.

View in Browser launches your Web browser with the selected file. (You can set file editors in the Helper Apps tab of the Options dialog box. See  site management options.)

Changing the font

Font... lets you modify the font, font size, font style and font color used to display the text in the current window (this does not apply to the Project tab).

You can choose a font from the Font list. Similarly, the various styles—bold and italic—and the point sizes of the fonts can be selected from the Font style list or Size list respectively, or entered into the appropriate text box. You can choose Effects (strikeout and underline), or select a font color from the drop-down list. Script lists the language scripts available for the particular font you have selected. An example of how the chosen font and options will look is shown in the Sample area. To apply the current settings, click on OK; click on Cancel to close the dialog box without making any font changes.

Properties

Properties launches the Windows Properties dialog for the file that you have selected.


Viewing the structure of your project

There are three ways of viewing the structure of your project in HoTMetaL PRO: the Project tab, Page Links view, and the Web View.

The different views show both local and external links (links to pages on the World Wide Web). However, HoTMetaL PRO does not automatically check the validity of those off-site links, nor does it show pages linked to those off-site Web pages. You can check your off-site hyperlinks by choosing External Links... from the Project menu. See External links for details.

Note:  Since the Web View and Page Links windows show only files that can be reached by outward links starting at the home page, they will not show files in the project that aren't linked into the project via the home page or files linked to the home page. You can see those 'orphan' files in the Project tab because they do not have a chain on their file icon, and you can identify and group orphan files by choosing the command 'Orphan Files' from the Site menu (see Finding Orphan Files for details).

  More on this topic


Viewing the file structure of your project

To see exactly what files are in your project and how they are arranged into folders, use the Resource Manager.

The Resource Manager is a file management system in HoTMetaL PRO that gives you access to images, cascading style sheets, scripts, dynamic HTML, and so forth. It also allows you to create and rename folders and files, choose different views, and move files into folders. For information on using the Resource Manager to put images, cascading style sheets, scripts, and dynamic HTML into your Web pages, see Working with images.

To view the file structure of your project in the Resource Manager:

•	Click on the [image] button to open the Resource Manager, if it isn't open already.

•	Choose Open... from the File menu. The Open dialog box appears.

•	Choose Project Files (*.hpp) from the Files of type pull-down list.

•	Choose an .hpp file and click on Open. The project is loaded.

The Project ( [image]) tab appears next to the Assets and Desktop tabs at the bottom of the Resource Manager window.

The top pane of the Resource Manager window is called the Explorer pane. It allows you to view the folders contained in your project.

The bottom pane of the Resource Manager window is called the Contents pane. The Contents pane displays the contents of the folder selected in the Explorer pane, and enables you to create new folders, create file filters, and display files in a number of different ways. This pane has its own toolbar:

Viewing options

 There are several viewing options for the Contents pane.

To change the way files are displayed in the Resource Manager:

•	Click on the [image] arrow in the Resource Manager toolbar.

•	Choose Large Icon, Small Icon, List, Details, or Thumbnail from the pop-up menu.

Or:

•	Click repeatedly on the [image] button to cycle through the different viewing options.

Or:

•	Right-click in the Contents pane, choose Arrange Icons, and then choose a view from the fly-out menu.

Navigating

Click on the [image] icon in the Resource Manager toolbar to move one folder up in the folder tree.

Viewing specific files

You can select specific types of files to be viewed in the Contents pane using the File Filter menu. For example, if you want only .gif images to be displayed in the Contents pane:

•	Click on the [image] button. The Add New File Filter dialog box appears.

•	Type *.gif in the text box. The asterisk indicates that any file name with a .gif extension will be displayed in the Contents pane. You can perform this operation for any particular file type. By default, all file types, (*.*), are selected for viewing in the Contents pane.

Click on the [image] icon to show all files in the folder.

The [image] icon opens a drop-down menu that lets you select file filters that have been added.


Viewing your project as it would appear on the Web

Web View

To check the validity of links in your document, get a sense of the overall shape of your project, and determine the pages that users can access when they visit your Website, use the Web View.

To display the Web View window, if it isn't displayed already:

•	Choose Web View from the View menu or click on the [image] button in the Views toolbar.

  The Web View window shows the link structure of your project as if it were sliding on the surface of a sphere. It's called the Web View because it looks like a web, and also because it most closely resembles the way that users will navigate your site when they encounter your pages on the World Wide Web.

The Web View uses a 'breadth-first' method for displaying links. This means that when displaying the links for a page, priority is given to displaying the direct links from that page, rather than displaying all the sub-links from individual pages.

To navigate around the Web View and move other files closer to or farther away from the center of the Web View, move your mouse cursor in the window until it becomes a hand (it must not be directly above a file). Clicking the left mouse button causes the hand to 'grip'; keeping the mouse button held down allows you to move the Web View over the surface of the sphere, moving different files into view.

Showing all links from a file

You can recalculate the Web View to show all links based on a selected file.

•	Right-click on the desired file and choose Show All Links from the pop-up menu in the Web View window.

Choosing Show All Links shows all links that radiate out from the selected file, and not just the links that radiate outward from the home page. This is similar to the Page Links window, which shows all the links both into and out of one particular file, except that Show All Links shows only the links going out of the current file (as well as the other links in the project).

  More on this topic


Displaying links in the Web View

The labels for the file names and links in the Web View are displayed in different colors, which show how they are linked into the project.

The legend describing the different colors and their meaning appears at the bottom of the Web View.

You can show or hide the legend by right-clicking on the background of the Web View window and choosing Show Legend / Hide Legend.

The different colors of the files in the Web View indicate the different types of links in a project:

•	Black – HTML file, image file, or other type of file.

•	Green – Home page of the project.

•	Red – Broken link.

•	Blue – External (World Wide Web) link, outside the local file system or a file outside of the current project folder.

•	Yellow – The currently selected file(s).

When you select any file in the Web View window, the path to that file is shown at the bottom of the window, and the corresponding file is highlighted in the Project tab.

See Viewing options in the Web View window for information on configuring the appearance of the Web View window.


Viewing options in the Web View

Right-clicking anywhere in the Web View window brings up a pop-up menu that lets you change some viewing options. (Many of the other commands in this menu also appear when you right-click in the other windows.) The following options are available:

•	Docking View – Creates a larger viewing space. See Docked and floating windows for more information.

•	Show All Links – Recalculates the links using the current file as the temporary 'home page'.

•	Full View/Minimal View — Full View shows all linked files in the project; Minimal View shows only HTML files.

•	Right Align – Toggles between displaying files linked to the home page clustered at the right edge of the Web View 'sphere' and displaying them spaced around the entire sphere.

•	Display Long Text – Toggles between full and truncated link names. Sometimes the Web View is easier to read if the link names are abbreviated.

•	Show Legend / Hide Legend – Toggles between showing or hiding the legend at the bottom of the Web View.

•	Allow Docking – Allows you to separate the Web View window from the HoTMetaL PRO interface as a separate floating window. You can drag the Web View window to wherever you like on your screen.

•	Hide – Closes the Web View window. To open the window again, choose Web View from the View menu.

There is also a command called Fix Broken Links... in this menu. It is used only when there is a broken link in your project (displayed in red in the Web View). See Fixing broken links for more information.


Structure of the Web View

The Web View is based on a home page, and all links are shown relative to that home page, and 'outward' from the links on that home page. This means that 'sideways' links between documents are not immediately visible; only links that go outward from the home page are visible. For example:

In this diagram, there are 'outward' ('parent to child') links between file a.htm (the home page) and the files b.htm, c.htm, and d.htm. There is also a 'sideways' ('child to child') link between b.htm and c.htm. The Web View, working outwards from the home page, a.htm, would show the links to files b.htm, c.htm, and d.htm; however, it does not show the link between b.htm and c.htm:

You can recalculate the Web View to show all links based on a selected file. Choose Show All Links from the pop-up menu that appears when you right-click on a file in the Web View. Choosing Show All Links shows all links that radiate out from the selected file, and not just the links that radiate outward from the home page. If links are recalculated when the b.htm file is selected, the following Web View would be shown:

In this case, the links between b.htm and c.htm are shown, since the links have been recalculated based on b.htm.


Viewing all the links for a particular file

To get a quick summary of all the links going into and coming from a particular file, use the Page Links window.

To display the Page Links window for a particular file:

•	Open the project.

•	Click on the file whose links you want to see.

•	Open the Page Links window by choosing Page Links from the View menu, or clicking on the [image] button from the Views toolbar.

The Page Links window lets you check all the links in one file:

•	The index file or last file that you have currently selected is displayed at the center of the Page Links window.

•	All the links leading into that file are shown on the left as file icons and names with arrows pointing towards the central file.

•	All the links going out from that file are shown on the right as file icons and names at the end of arrows pointing away from the central file.

Note: Files can link to themselves: bookmarks (document-internal links) will be displayed in the Page Links window as links to a file icon for the same file.

The icons in the Page Links window give you some information about what kind of file is being represented.

•	 – An HTML file on the local file system. This icon will vary depending on the program or version of the program you selected as your Web browser during installation (Internet Explorer or Netscape Navigator).

•	 – An image file.

•	 – A broken link.

•	 – Other files, including external links, links to Usenet newsgroups, links to FTP sites, and mailto links (see Links ).

For details of how to repair broken links, see Fixing broken links.

To display all the links for a file that's already visible in the Page Links window:

•	Click on that file. It becomes the central file, showing all the links into and out of that file. The file is also opened in the document window.

The Show All Links command in the Web View is similar to the Page Links view, but shows only the links from the selected file.

  More on this topic


Web View and Page Links window options

By default HTML (.htm, .html, .shtm, and .shtml) files in the Page Links and Web View window are displayed using their titles (the content of their TITLE element, if there is any). Image files and other files linked to the project are displayed using their actual file names.

You can toggle between showing filenames and showing titles for HTML files by right-clicking in any view in the Page Links and Web View window and choosing Show Filenames or Show Titles. Files without TITLE elements will always be shown as file names.


Viewing file thumbnails

The Thumbnail View is useful for viewing thumbnails of HTML documents and image files (GIF, JPEG, PNG files) in your project. This is helpful when you want to see quickly what a particular file looks like.

Note: You must have Microsoft Active Desktop installed in order to use Thumbnail View. Active Desktop is available if you are running Windows 98, or if you installed Active Desktop when you installed Microsoft Internet Explorer.

To use the Thumbnail View:

•	Open the Resource Manager by clicking on the [image]  button or choosing Resource Manager from the View menu.

•	If you want to view a project file, open the project. Project files will appear under the Project tab.

•	Click on the appropriate tab and choose the file you want to view from the Contents pane.

•	Choose Thumbnail View from the View menu, or click on [image] in the Views toolbar. The file appears in the Thumbnail View window.

If you want to use the file as a link in your project:

•	Click on the thumbnail in the Thumbnail View window and drag it onto the HoTMetaL PRO document window.

•	Drop the file onto the area of your document that you want the link to appear in.

Note: If you have multiple windows open, the Thumbnail View window may be too small to view the file. You can make the Thumbnail view a floating window and then resize it as needed.


Remapping a project after changes

If the file or link structure of a project has been updated—for example, if a file has been deleted or a new link added—the Project tab needs to be updated: this is called remapping. HoTMetaL PRO re-scans your project, and updates the windows and the .hpp and .hmp files.

If you make a change with HoTMetaL PRO, HoTMetaL PRO will prompt you to remap the site. Click on OK. To remap the links in a site:

•	Choose Remap Links from the Project menu, press F5, or click on the [image] button in the Site toolbar.

HoTMetaL PRO will perform an immediate remap.


Opening an existing project

To open an existing project:

•	Click on the [image]  button to open the Resource Manager.

•	Choose Open... from the File menu. The Open dialog box appears.

•	Choose Project Files (*.hpp) from the Files of type pull down menu and click Open. The project is loaded.

You can also load recently opened projects by choosing Recent Projects from the File menu.

The Project ( [image]) tab  will appear next to the Assets and Desktop tabs at the bottom of the Resource Manager window.

The last four previously opened or imported projects are listed in the Recent Projects fly-out menu in the File menu. Choosing a project file from that list will open it in the Project tab window.


Adding existing pages to a project

Use the Import Site... command from the Site menu to add an existing HTML page (and some or all of the pages linked to that page) to a project. This is useful when you want to expand your current project in some way, or merge two or more sites into a single project.

To import an existing HTML file or files:

•	Have a project open.

•	Choose Import Site... from the Project menu.

•	Select the root page of the site that you want to import from the Open dialog box that appears.

When you have selected the home page, the Import Site dialog box appears.

The structure of the site that you are importing is shown in a view similar to the Web View. In this dialog box, you must specify:

•	The level of associated files that you want to import.

•	The destination folder for the imported site.

•	Whether you want to import all files or selected files.

•	Choose the destination folder (that is, the project that you want to copy the files to) by either entering the path to that folder in the Import Destination text box, or clicking on Browse... to navigate to the folder.

You can select the number of levels of files linked to the main file that you want in the site that you're importing. By clicking on the Number of levels displayed control, you can choose the number of levels, from zero (just the home page) to the maximum in the site. The level control will only go up to the maximum number of levels in your site (which, if you're just importing one file that's not linked to any other file, will be zero). Clicking on Map Now will redisplay the site with the selected level of files.

Note: Only links to local files are displayed in the 'Import Site' dialog. If there is a link to an external site, that page will not be displayed or imported.

You can import all of the files linked to the root page—to the maximum number of levels or to a selected level—or select individual files.

To import all of the linked files:

•	Turn on All Visible Levels.

•	Increase the Number of levels displayed as high as it will go.

•	Click on OK.

To manually select which files you want to import:

•	Turn on Selected Files Only.

•	Click on a file in the Web View window of the Import Site  dialog. As soon as you click on a file, all other files become blue (deselected). The file you are clicking on remains yellow (selected).

•	To select more files, hold down the Ctrl key and click on the file icons.

To re-select all visible files in the site, turn on All Visible Levels and use the Number of levels displayed control to show as many levels as you want to import.

When you have chosen both the file to import and its destination folder, click on OK in the Import Site dialog box; the files you have selected will be copied to the specified folder. If you choose a file that is linked to files in subfolders, the same file and folder structure will be re-created in the new location. You will be warned of any name conflicts with existing files and folders and given the chance to cancel the import if that occurs. The site management functions will rebuild the views to show the new HoTMetaL PRO file that you have imported.

Note: A file imported into your project might not have any links to other files in your project. You may need to add links that point to the new file in order to make it part of the link structure of the project. You can do this by editing files, or by dragging and dropping files in the site management view windows.


Creating a new folder

To create a new folder in your project:

•	If the Resource Manager is not open, choose Resource Manager from the View menu.

•	Click on the [image] button in the Resource Manager toolbar, or right-click in the Contents pane and choose New Folder, or choose New Folder from the File menu. The folder is created in the existing project folder.

•	Type in a name for the folder and press Enter.

The Site Doctor dialog box appears, asking if you want to change all the links that refer to that file:

•	Press Enter to say 'Yes'.


Managing files and links between files

You can cut, copy, paste, delete and rename files in the Contents pane, and HoTMetaL PRO will help you keep track of and maintain the links to those files.

You can move and copy files in the Explorer and Contents pane much as you would in the Windows Explorer, by dragging and dropping files and folders. You can also choose the cut, copy, paste, delete and rename commands from the Edit menu or from the right-click pop-up menu.

•	Cut (or press Ctrl+X) – Cuts the selected file or folder. You can paste the file or folder using the Paste command.

•	Copy (or press Ctrl+C) – Copies the selected file or folder.

•	Paste (or press Ctrl+V) – Pastes a file that you have cut or copied.

•	Delete (or press Delete) – Deletes the selected file or selected folder and all its contents. The file is sent to the Recycle Bin, and is not permanently removed from the disk until you empty the Recycle Bin.

To restore the file:

•	Open the Recycle Bin.

•	Right-click on the file and choose Restore from the pop-up menu.

The file will reappear in the folder you deleted it from. (You will need to choose Remap links from the Project menu, or press F5, to see the restored file in the HoTMetaL PRO.)

•	Rename – Lets you rename the selected file. The name of the file becomes editable, and the name change takes effect when you click outside of the file name or press Enter. When you finish renaming a file that is linked to other files, the Site Doctor dialog box appears.

If you click on Yes in this dialog box, the Site Doctor automatically updates all links to the file in the current project with the new filename.

•	You can create a new folder in the project by choosing New Folder from the File menu, or right-clicking on the Contents pane and choosing New Folder from the pop-up menu. This command creates a new folder within the selected folder of the Contents pane, which you can then rename.

When you move or rename a file, the Site Doctor is started; this will update the links as needed, so that they don't become broken. When you move a file, the links within the file that refer to other documents are not updated; in other words, moving the file will correctly update the files that  refer to the moved file, but may create broken links within that moved file.

Deleting a file can create broken links in your project; use the Broken Links command in the Project menu to check the link structure of your project.

Any of these operations can also be carried out by selecting the file and then choosing the cut, copy, paste, delete and rename commands from the Edit menu or the pop-up menu.


Creating links by dragging and dropping

You can create links by dragging a file in the Web View onto another file in the Web View, from the Page Links window onto a file the Web View, or from Windows Explorer onto a file in the Web View. The Site Doctor will appear, asking you if you want to create a link in the file that you are dragging onto, to the file that you are dropping.

The link that you create by dragging and dropping will be inserted at the top of the document; the initial hot text will be the path to the file. If you want to change the hot text or position of the link, edit the file using HoTMetaL PRO.

Note: It is not possible to drag a link into the Web View from a browser window.


Changing your URLs for the Web

Before a completed HTML document is moved to a WWW server, all URLs should refer to documents that are available on some WWW server. (While the document is being created, they may refer to documents on your local system.)

For the most part, links in your HTML pages will have relative URLs, which won't be a problem on the WWW. However, in some cases (for example, when you create links to an unsaved document, or copy and paste links from other documents), your links may have absolute URLs that start with file:///. These links are not accessible over the WWW:

file:///c|/rodney/orwell/homage.htm

When the document is placed on your server, you must substitute URLs that refer to documents that are available on your server or some other server. For example:

http://www.sq.com/orwell/homage.htm

The Find and Replace URLs... command in the Edit menu gives you the opportunity to edit all the URLs, modifying them if necessary. This command is a form of 'find and replace' for URLs.

For information about replacing URLs in a project, refer to Finding URLs.

To find and replace URLs:

•	Launch HoTMetaL PRO.

•	Open the document that you want to find and replace the URLs in.

•	Choose Find and Replace URLs... from the Edit menu.

A dialog box will appear containing two text boxes.

 The first box (labeled Change URLs From) contains a part of the URL that you want to change; the second box (labeled To) contains the text that you want to change it to. You can enter text in these boxes to replace the default text.

If there were a large number of URLs for which you needed to change a local folder such as file:///c|/rodney to a server address, such as http://www.sq.com, you could enter:

file:///c|/rodney

 in the Change URLs From text box, and:

http://www.sq.com

 in the To text box.

  More on this topic


Finding and replacing URLs

When you click on Find Next, HoTMetaL PRO finds the next element that has a URL matching the Change URLs From text. The insertion point is placed inside that element, and the document scrolls to its location. The search starts at the insertion point or selection.

Clicking on Replace will change the text you're searching for to the text in the To box.

 Clicking on Replace All will make this change for all URLs in the document that contain the Change URLs From text. This also dismisses the dialog box. (The number of replacements is shown in the status bar at the bottom of the HoTMetaL PRO window.)

This form of 'find and replace' matches only starting at the first character of the URL.

The values you enter in the  Change URLs From and To text box will be saved and become the defaults.

For information on replacing URLs on the fly at publish time, see URL Replacement in the HoTMetaL PRO online help.


Changing to relative URLs

You can change your URLs so that they are in relative rather than absolute form. What this generally involves is deleting the first part of all URLs; that is, the scheme, the host, and perhaps part of the path. For example, if your current links were all of the form file:///c|/rodney/orwell/file.htm and you wanted to put them in a directory on the Web, it could be useful to put them in relative form, if all your files were in a flat directory on your Website. In the Change URLs From text box, you would type file:///c|/rodney/orwell. You would not type anything in the To text box. The effect of that changing URLs operation would be to strip the scheme, host, and most of the path, and leave you with file.htm for all your URLs. For more details on relative and absolute URLs, see Links .


Publishing your project

Publishing is carried out by synchronizing your local project folders with those on a remote site. To configure your project to synchronize with a remote site:

•	Choose Properties from the Project menu.

•	If the remote site for the project has already been defined, you can choose it from the pull-down menu.

•	If you wish to create a new remote site definition, click on New.... This brings up the Site Properties dialog. For details on creating a new site, see Remote editing and publishing.

To synchronize the remote site with the local project:

•	Choose Synchronize... from the Project menu.

The Remote Synchronization dialog is displayed.

Set the options as described in Synchronizing local and remote filesfor more details.

•	Click on Synchronize to publish the files.

You will be prompted to confirm the file synchronization. See Synchronizing local and remote files for more details. The files on the remote server will be updated according to your synchronization settings.


Setting the default editor and browser, and other options

You can set the default cascading style sheet editor and viewer (Web browser) launched from the site management windows.

•	Choose Options from the Tools menu.

These settings are also used in the document editing window.

In the Helpers Apps tab, you can select an HTML viewer (that is, a Web browser), and a cascading style sheet for your documents by clicking on Choose... and selecting the appropriate file.

You can choose whether the site management functions will map the links within Microsoft Office documents by turning on or off the Map Microsoft Office Documents check box in the General section of the Options dialog box.

If you turn on Web View Smooth Scroll, in the View section of the Options dialog box, the Web View window will scroll more smoothly when you highlight a different file in the Project tab, and the Web View scrolls to display the highlighted file in the center of the window. This form of scrolling can be slower if you are displaying a large project.

If you make a change to the file or link structure of the project with HoTMetaL PRO, you should remap the site.


Coding guidelines for Miva files

HoTMetaL Personal Server is provided with HoTMetaL PRO 6.0, but not with the Evaluation Version that you are now using. Choose 'How To Purchase' in the Help menu for ordering information.

HoTMetaL PRO is a validating structured editor that can make editing Miva files easier. The special features that it brings to this process are:

•	Tag completion: If you insert a paired tag such as [MVIF> in HoTMetaL PRO's Tags On mode, HoTMetaL PRO will always insert the corresponding end-tag (such as </MVIF]).

•	Attribute editing: HoTMetaL PRO's Attribute Inspector presents a list of valid attributes for the current element and displays the required attributes in bold. All you have to do is enter the desired attribute values. The Attribute Inspector context sensitive help gives a description of each Miva (and HTML) attribute.

•	Rules checking: By continuously checking your document against a rules file as you are editing it, HoTMetaL PRO ensures that you don't create any code or markup that has syntax errors.

•	Previewing: run a Miva application by simply clicking on a browser preview button.

HoTMetaL PRO's site management functions help you organize your files, display links between them, and publish them to a server that runs HoTMetaL Application Server.

 If you have already created some Miva documents and want to open and edit them with HoTMetaL PRO, these coding guidelines provide information on how to ensure that your code is compatible with HoTMetaL PRO.

  More on this topic


Inserting Miva tags

HoTMetaL PRO has three editing modes that you can use to enter Miva tags: WYSIWYG, Tags On, and HTML Source. We recommend that you work in either Tags On mode (where you can take advantage of HoTMetaL PRO's tag and attribute editing functionality) or in HTML Source mode (in which you can enter Miva and HTML code directly).

To insert a Miva tag:

•	You must be in Tags On mode (press Ctrl+Shift+O).

•	Choose Element... from the Insert menu, or press Ctrl+Shift+I. The element list dialog is displayed.

•	Click on the Miva tab in this dialog to see only the available Miva tags, or click on the HTML tab to see all available tags.

•	Select the element that you want to insert from the list. You can scroll to an element quickly by typing the first few letters of its name.

•	Click on Apply.

HoTMetaL PRO inserts start- and end-tag icons in the document. If the element is one such as <MVELSE> that doesn't have an end-tag, a blank end-tag icon will appear on the screen (for example,[MVELSE> < ]) but will not be saved when you save the file.


Attributes

1	Attribute values must always be surrounded by double quotes in HTML Source mode. If you are entering attribute values in Tags On mode with HoTMetaL PRO's Attribute Inspector, double quotes will be inserted for you automatically. If your document is valid, HoTMetaL PRO will insert these for you if you open and save it.

2	An attribute value should not be specified simply as a value. For example, instead of:

<TABLE BORDER>

 You should use:

<TABLE BORDER="BORDER">

 Again, if your document is valid, HoTMetaL PRO will do this conversion for you.


Forming expressions and literals

An expression is a formula that can be evaluated to give a result.

<MVASSIGN NAME="price" VALUE="{ cost + markup }">

In this example, '{cost + markup}' is an expression: when the <MVASSIGN> tag is executed, the values of the two variables cost and markup are added and the result is assigned to the variable price.

A literal is a string of text or a number, which needs no further evaluation.

<MVASSIGN NAME="organization" VALUE="United Nations">

<MVASSIGN NAME="age" VALUE="22">

'United Nations' and '22' are literals.

In Miva, literals and expressions occur in attribute values. The following rules govern the use of expressions and literals.

1	If you are entering an expression, always enclose it in curly brackets, '{' and '}'. For example:

<MVASSIGN

 NAME="interest"

 VALUE="{ principal * rate * time }">

2	If you are entering a literal value (a number or text string that doesn't require evaluation), just enter it as is. For example:

<MVASSIGN

 NAME="CEO"

 VALUE="Mr Dithers">

3	If an expression contains a literal text string in combination with other components, surround it with single quotes, not double quotes. For example:

<MVASSIGN

 NAME="greeting"

 VALUE="{'Dear Mr ' $ last_name $ ','}">

4	Similarly, macros that evaluate to literal text strings should be surrounded with single quotes. However, if a macro evaluates to a string that is intended as a variable name in this context, it should not be surrounded by single quotes. For example:

<MVASSIGN NAME="firstname" value="Cynthia">

<MVASSIGN NAME="var" value="{'first' $ 'name'}">

<MVEVAL EXPR="{'Dear ' $ &[firstname]}"><br>

<MVEVAL EXPR="{'Dear ' $ '&[firstname]'}"><br>

<MVEVAL EXPR="{'Dear ' $ &[var]}">

 This code will display:

Dear

Dear Cynthia

Dear

Cynthia

 After the macro is evaluated, the first <MVEVAL> is equivalent to:

<MVEVAL EXPR="{'Dear ' $ Cynthia}"><br>

 In this situation Cynthia will be interpreted as a variable, but since it has no value, nothing will be displayed when it is evaluated. After macro evaluation, the second <MVEVAL> is equivalent to:

<MVEVAL EXPR="{'Dear ' $ 'Cynthia'}"><br>

 Since Cynthia is in single quotes, it is interpreted as a literal and displayed. The third <MVEVAL>, after macro evaluation, is equivalent to:

<MVEVAL EXPR="{'Dear ' $ firstname}">

 In this case firstname is a variable that evaluates to the literal string 'Cynthia', which is displayed.


Forming Miva macros

A Miva macro of the form &[variable] will be converted into the form &amp;[variable] by HoTMetaL PRO. This form is executed the same as the original form by HoTMetaL Application Server. The following four forms for expressing a macro are equivalent:

&[variable]

&amp;[variable]

&[variable];

&amp;[variable];


Using tables

If you are using Miva code in conjunction with tables, you should avoid putting Miva tags directly inside a <TR> (table row) element. This generally results in HoTMetaL PRO not displaying the table correctly, and perhaps reporting spurious errors. It is acceptable to surround a <TR> (and its corresponding </TR> end-tag) with Miva tags, or to put Miva tags inside a <TD> or <TH> tag. The following two code fragments are acceptable:

<MVCOMMENT>

| Case 1

| <TR>...</TR> tags inside <MVIF>...</MVIF>

</MVCOMMENT>

<MVIF EXPR="{finished}">

 <TR>

 <TD>...</TD>

 <TD>...</TD>

 </TR>

</MVIF>

<MVCOMMENT>

| Case 2

| <MVIF>...</MVIF> tags inside <TD>...</TD>

</MVCOMMENT>

<TR>

 <TD>

 <MVIF EXPR="{finished}">

 ...

 </MVIF>

 </TD>

 <TD>...</TD>

</TR>

The following code is problematic because the <MVIF> is directly inside the <TR>:

<MVCOMMENT>

| Case 3

| <MVIF>...</MVIF> tags inside <TR>...</TR>

</MVCOMMENT>

<TR>

 <MVIF EXPR="{finished}">

 <TD>...</TD>

 </MVIF>

 <TD>...</TD>

</TR>

If you have code like this, you should try to rewrite it in a way that gives the same or similar results, but conforms to these guidelines. For example, in many situations case 2 above can substitute for case 3, because an empty table cell is not displayed unless it has a visible border.

There are some insertions in and around tables that you'll have to do in HoTMetaL PRO's HTML Source view (choose HTML Source from the View menu or press Ctrl+Shift+H). For example, HoTMetaL PRO doesn't let you select individual rows of a multi-row table in WYSIWYG or Tags On view, so if you want to surround a row with a tag such as <MVIF>, you'll have to do it in HTML Source view.

Table rows that are surrounded by Miva tags are shown as separate tables without borders.


Markup to avoid

Some markup constructs should not be entered if you are creating documents with HoTMetaL PRO, and should be replaced with equivalent forms, if you want to open already-created documents with HoTMetaL PRO.

  More on this topic


Non-XML tags

Some tags that were inherently non-XML-compliant have been replaced by XML-compliant forms. Non-compliant markup cannot be entered in the WYSIWYG and Tags On views, and should not be entered in HTML Source view.

1	<MVLET> has been replaced by <MVASSIGN>. An <MVLET> tag of the form:

<MVLET

var_name="{var_value}">

 is equivalent to, and should be replaced by, the following <MVASSIGN> tag:

<MVASSIGN NAME="var_name" VALUE="{var_value}">

2	<##...> for inserting comments has been replaced by the tag pair <MVCOMMENT> and </MVCOMMENT>. A comment of the form:

<## Hey, look, I'm a comment! >

 is equivalent to, and should be replaced by, the following:

<MVCOMMENT> Hey, look, I'm a comment! </MVCOMMENT>

 You can also insert HTML-style comments with HoTMetaL PRO: to do so, choose Comment from the Insert menu, or press F8. HTML comments are displayed in HoTMetaL PRO as [.COMMENT> </.COMMENT] tag icon pairs, and in the saved file appear as:

<!-- Hey, look, I'm a comment! -->

 Unlike Miva comments, HTML comments are passed to the browser, and can be viewed in the browser's source view. They are not displayed in the browser's normal view.


Non-standard names

In the interests of more consistent coding, HoTMetaL PRO has standardized on the following tag and attribute names:

1	<MVEVAL> should always be used instead of <MVEVALUATE>.

2	The attribute name EXPR of <MVEVAL>, <MVIF>, and <MVWHILE> should always be used instead of EXPRESSION.

3	<MVFUNCRETURN> should always be used instead of <MVFUNCTIONRETURN>.


Macros for attribute assignment

Miva macros should not be used to specify both the name and value of an attribute. For example, don't do this:

<MVCOMMENT>

| Avoid this!

</MVCOMMENT>

<MVIF EXPR="{year EQ '1998'}">

 <MVASSIGN NAME="attr" VALUE="SELECTED='SELECTED'">

<MVELSE>

 <MVASSIGN NAME="attr" VALUE="">

</MVIF>

<OPTION NAME="year" &[attr]>1998</OPTION>

Instead, do this:

<MVCOMMENT>

| Do this!

</MVCOMMENT>

<MVIF EXPR="{year EQ '1998'}">

 <OPTION NAME="year" SELECTED="SELECTED">1998</OPTION>

<MVELSE>

 <OPTION NAME="year">1998</OPTION>

</MVIF>

You can, however, use macros to specify attribute values in Miva and HTML tags:

<MVASSIGN NAME="default" VALUE="Enter text here">

<INPUT NAME="Text1" VALUE="&[default]">


Improper nesting

You should strive to have properly nested tags. HoTMetaL PRO will enforce this in documents that it creates, but older documents may have to be fixed up. A good principle to follow is that the document should be valid as an HTML document if all the Miva tags are removed.

For example, if you wish to use a <FORM> in conjunction with a <TABLE>, you should not put the <FORM> start-tag inside the table, and the </FORM> end-tag after the table. This will cause HoTMetaL PRO to terminate the form prematurely and some form objects may not be recognized by the browser. In this situation you should either enclose the entire table between <FORM> and </FORM> tags, or put the <FORM> and </FORM> tags inside a single table cell (<TD>), whichever is appropriate.

Another construction to avoid is an <MVIF> ...</MVIF> block that surrounds a start-tag but not the corresponding end-tag, or vice versa. For example:

<MVIF EXPR="{color NE '#ff0000'}">

 <TABLE BGCOLOR="&[color]">

<MVELSE>

 <TABLE BGCOLOR="#ffffff">

</MVIF>

....

</TABLE>

Instead, you can use a construction such as the following:

<MVIF EXPR="{color NE '#ff0000'}">

 <MVASSIGN NAME="tablecolor" VALUE="&[color]">

<MVELSE>

 <MVASSIGN NAME="tablecolor" VALUE="#ffffff">

<MVIF>

<TABLE BGCOLOR="&[tablecolor]">

....

</TABLE>


If all else fails

We have yet to find a case where you cannot do what you want with Miva and have valid HTML at the same time. However, if you find yourself in this situation, you can use the following mechanism to force HoTMetaL PRO to ignore the markup:

<!--webbot bot="HTMLMarkup" startspan -->

...Markup here is ignored by HoTMetaL...

<!--webbot bot="HTMLMarkup" endspan -->

This is compatible with the Microsoft FrontPage HTML Markup Webbot component.


Manipulating your text

What's covered in this chapter

This chapter describes using HoTMetaL PRO to work with the text in your document. Topics include:

•	Selecting, copying, cutting, and pasting text.

•	Searching and replacing text.

•	Moving between open documents.

•	Printing your document.

You can work with your text in HoTMetaL PRO much the same way you would in a word processing package, editing and moving words to reflect changes to the information in your document. There are, however, some minor differences that reflect the fact that you are working with a structured document that contains markup as well as text.

  More on this topic


Working with selected text

In HoTMetaL PRO, it is easy to select and move around parts of the document structure in HoTMetaL PRO without having to worry about making the markup invalid. Each time you select a start- or end-tag when you drag-select text, the corresponding tag (and all the content in between) is automatically selected, too. This ensures that you never cut, or move, just part of the markup. There are also a number of ways to quickly select a whole element (and any sub-element).

To select an element, do one of the following:

•	Choose Select Element from the Edit menu, or press Ctrl+Shift+T.

•	Right-click anywhere in the element and choose Select Element from the pop-up menu.

•	In Tags On view, you can also click once on either the start- or end-tag.

The element is selected.

To select several consecutive elements:

•	Place the insertion point anywhere in the first element to be selected, and drag in the appropriate direction until all of the elements are selected.

The Cut, Copy, and Paste commands are similar to those in other Windows applications. The only difference is that in HoTMetaL PRO, a selection can contain elements. Removing or pasting certain elements can cause invalid markup in some circumstances.

HoTMetaL PRO will not paste a selection that would cause the markup to become invalid. Cut and Delete will become disabled if you select required elements, such as HTML, HEAD, and BODY.

To select all the content in a document:

•	With the insertion point anywhere in the document, press Ctrl+A.


Indenting and outdenting selected text

You can indent and outdent blocks of text. This is useful, for example, when you want to insert quotes from a book or press release in your document. To indent:

•	Highlight one or more blocks of text, such as paragraphs, headings, etc., or to select a single block for indenting, place the insertion point anywhere in the block.

•	Click on the [image] toolbar button or choose Indent from the Format menu.

The text is now indented (indenting text surrounds it with a BLOCKQUOTE element).

To outdent text:

•	If one or more blocks of text have been indented (that is, they are surrounded by a BLOCKQUOTE element), you can outdent them to reverse the indenting.

•	Click on the [image] toolbar button or choose Outdent from the Format menu.

The selected text is now outdented in your document.


Searching and replacing text

You can find and replace text, elements, and patterns. Search and replace operations in HoTMetaL PRO are similar to word processing applications with the following differences:

•	Text searches will not find a match if part of the text is found in a separate element. For example, if you are searching for 'World Wide Web' and the word 'Web' is in an EM element, the text will not be matched.

•	If rules checking is on, text will not be replaced if it will cause incorrect markup. If such a replacement occurs in a 'replace all' operation, it will be skipped.

•	Choosing the Undo command after a 'replace all' undoes all of the replacements.

To find text:

•	Choose Find and Replace... from the Edit menu, click on the [image] button, or press Ctrl+F. The Find and Replace dialog box appears. If text was selected, it appears in the Find text box.

•	Type the text to be found in the Find text box. The maximum length is 255 characters.

•	Specify replacement text in the Replace text box.

•	If desired, use the Find In text box to restrict your search to a particular element.

•	Click on the Find button. The first instance of the search text will be highlighted.

•	Click on Replace, Replace, Find or Replace All, as appropriate.

To search again using the most recent search text:

•	Choose Find Next from the Edit menu, or press F3.

Note: Turn on Use Pattern Matching to use search expressions.

  More on this topic


Specifying search options

You may want to search forward or backward through your document, match only whole words, match upper- and lower-case exactly, wrap back to the beginning of the document, or do a pattern search. You can set any of these options and even use them in combination.

•	Choose Find and Replace... from the Edit menu, click on the [image] button, or press Ctrl+F. The Find and Replace dialog box appears.

The following search options are available in the Find and Replace dialog box:

•	Match Case – Searching will match text that is exactly as entered, matching upper case to upper case and lower to lower. For example, the search text 'maria' would not match 'MARIA' or 'Maria'. This option applies to patterns as well as text.

•	Whole Words – Searching will match a sequence of one or more whole words only. For example, if you search for 'red' with Whole Words turned on, HoTMetaL PRO will not find it in 'Fred'.

•	Use Pattern Matching – Enables the search ability to find patterns. If Use Pattern Matching is turned off, any special search characters in the search or replace text will be treated as ordinary characters.

•	Wrap – Searching will wrap around to the top of the document and continue to the starting point (or to the bottom of the document for a backwards search), if Wrap is turned on.

•	Backwards Search – Searches for the requested word starting at the end of the document, if Backwards Search is turned on.


Searching for elements

Both the search and replace text can consist of an element. Choose an element from the drop-down list or enter an open angle bracket (<), followed by a valid element name. Following the element name with a closing angle bracket (>) is optional. The angle bracket must be the first character. If the element is found, the insertion point is positioned to the right of the start tag for that element. For example,

<P

matches the element P. Element names are not case sensitive in HoTMetaL PRO, so '<p' would also find this element.

If the search and replace text are both elements, the element in the search text will be changed to the type specified in the replace text, if the HTML rules allow it. The contents of the element will be unchanged.

You can also search for instances of an element with certain attribute values, or search for text within a specific element type.


Searching for attributes

You can restrict the search text to an element with specific attribute values by following the element name with a space-separated list consisting of attribute names followed by an equal sign (=), followed by a value in double quotes (" "). For example:

<a name="donkey"

will search only for those A elements whose NAME attribute has the value 'donkey'.

You can specify replacement attribute values in the replace text in the same way. For example, to change the above name attribute to 'burro', type the following replacement text:

<a name="burro"


Searching for text within an element

In HoTMetaL PRO, you can restrict searches to a particular element type. Use the drop-down list beside the Find In text box to specify the element that you want to restrict searching to; specify the search text in the Find text box. For example, to find the word 'now' in an EM element, enter the text in the Find text box and specify the element in the Find In text box, as follows:

<EM>

Attribute values may also be specified in the Find In text box. For example:

<a name="donkey"

You can also search for specific text anywhere in a specific element type by entering the the element name, with opening and closing brackets, followed by the text in the Find text box. For example:

<EM>the

This search text would match the word 'the' anywhere within a EM element. This is similar to the restrictive searching that can be done using the Find In text. The two options can be used together to further restrict the search. In the above example, if the Find In text is set to:

<P>

the word 'the' would be matched if it appeared in a EM element within a paragraph, but not in any other context.

In the replace text, an element name cannot be followed by text: an error message will appear and the replacement will not occur.

If you have badly-formed search or replace text, an error message will appear, describing the error. For example, if you use the search pattern:

<QUAGMIRE

the following message appears:

Find: Invalid element name

because HTML rules do not allow an element called QUAGMIRE.

Possible errors include invalid attribute or element names, unmatched parentheses and brackets in search patterns, special search characters not preceded by a character, and invalid character ranges.


Using search patterns

If the Find Patterns option is turned on, the characters in the Find text box are interpreted as patterns. That is, the search text can contain special search characters that will match a class of text strings, or markup constructs. (If your search text does not contain any special characters, the text will be searched for exactly as entered.) The following special characters can be used:

. * ? + ^ $ [ ]

In addition, the character '<' is used to indicate an element search when it appears as the first character in the pattern.

To search for any special character as ordinary text when Find Patterns is turned on, precede it with a backslash. For example:

\.

will match a period.

Search patterns may be grouped by enclosing them in parentheses.

Matching any single character

To match any single character, including a blank space, use a period (.). For example

fo.d

would match 'food', 'ford', 'fond', 'fold', etc.

Matching zero or one

To match zero or one occurrences of a character, or series of characters enclosed in parentheses, follow the character with a question mark (?). For example:

colou?r

would match both color and colour.

Matching zero or more

To match zero or more occurrences of a character, or series of characters enclosed in parentheses, follow the character with an asterisk (*). For example:

l*ama

would match 'ama', 'lama', 'llama', 'lllama', etc.

b(an)*a

would match 'ba', 'bana', 'banana', etc.

You can combine the asterisk and period to match any text starting and ending with specified characters. For example:

s.*ch

would match 'search', 'such', 'stretch', 'stopwatch', as well as 'sch' and 'skip lunch'.

Matching one or more

To match one or more occurrences of a single character, or text enclosed in parentheses, follow the character with a plus sign (+). For example, the following search text would match 'ben', 'been', etc., but would not match 'bn':

be+n

Matching either/or

To search for either of two search patterns, separate them with a pipe or vertical bar (|). For example, to search for 'love' or 'money' use:

love|money

You can combine this with other search patterns. For example, to find truth or dare:

tr.th|d.*e

Matching just after markup

To search for text only when it immediately follows a start or end tag, start the search pattern with a caret (^). For example, to find the word 'Note' at the start of a paragraph use:

^Note

Matching just before markup

To search for text only when it is immediately followed by a start or end tag, end the search pattern with a dollar sign ($). The dollar sign is not treated as a special search character unless it is at end of a search pattern. There cannot be white space between the text to be found and the tag. For example, to search for the word 'sub' immediately preceding a tag, use:

sub$

Matching character ranges

To define a range of characters to be matched, surround the group of characters with square brackets: '[' and ']'. The simplest form of character range matches any one of the characters within the brackets. For example:

t[ai]n

matches 'tan' and 'tin'.

A range of characters matches any character in that range of the alphabet. For example:

[b-d]

matches 'b', 'c', or 'd'. The pattern:

[A-Za-z0-9]

matches any alphanumeric character. If Case Sensitive is turned off, the character range a-z will match any upper- or lower-case letter.

To reverse the meaning of a character range—that is, to match characters not in the range—place a caret ,'^', before the range. For example:

th[^ei]n

matches 'than', but not 'then' or 'thin'. The expression:

[^m-p]

would match any lower-case letter in the alphabet before 'm' or after 'p'.

Re-using search text

To use a sub-expression in the search text in the replace text, surround the sub-expression with parentheses—'(' and ')'. Then refer to the sub-expression in the replace text in the form '\n', where n is a number from 1 to 9. This will then be replaced with whatever the nth expression in brackets in the search text has matched. For example, if the search text is:

(.)read

and the replace text is:

\1ox

then if the text 'bread' is found, it will be replaced with 'box'. The expression \1 is replaced by the matched text for the first expression in parentheses in the search text: in this case '(.)' was matched by 'b'. Here's an example with more than one sub-expression. This time, let's say the search text is:

(v.*e) (v.*a)

and the replace text is:

\2 \1

Now, what happens if the text 'vice versa' is found? The first sub-expression, '(v.*e)', matches 'vice' and the second sub-expression, '(v.*a)', matches versa. In the replace text, the second expression found is followed by the first, so the text becomes 'versa vice'.

You can even nest sub-expressions. The sub-expressions are numbered according to the order of their left parentheses. For example, if the search text is:

(cad(abra))

and the replace text:

\2 \1

'cadabra' will be replaced by 'abracadabra'.

To retain the entire matched text, use '\0' in the replace text. For example, if the search text is:

fish

and the replace text is:

gone \0ing

then, 'fish' will be replaced with 'gone fishing'.

You can use '\n' expressions in attribute replacement values: one application of this is to change a group of URLs. For example, if you want to change all of the filenames in your A elements to have the '.htm' file extension instead of '.html', use the following find text:

<a href="(.*)html"

and the replace text:

<a href="\1htm"

The element is matched by '<a'; the attribute that contains the URL value is called HREF; the pattern '(.*)' matches everything in the URL up to the extension; that matched text is substituted for '\1' in the replacement text; and the new extension is added.


Search pattern summary

Expression	Matches
ordinary character	itself
<name or <name>	the element name
.	any single character
x*	0 or more occurrences of the character x
(pattern)*	0 or more occurrences of the pattern
x+	1 or more occurrences of the character x
(pattern)+	1 or more occurrences of the pattern
x?	0 or 1 occurrences of the character x
(pattern)?	0 or 1 occurrences of the pattern
pattern1|pattern2	pattern1 or pattern2
^pattern	pattern immediately following markup
pattern$	pattern immediately before markup
[string]	any single character in the string
[^string]	any single character not in the string
[char1-char2]	any character in the range
[^char1-char2]	any character not in the range
\n	in a replace string, is replaced by the text matched by the nth subexpression in brackets in the search string
\0	in a replace string, is replaced by the text matched by the entire search string


Moving between documents

If you have more than one document open in HoTMetaL PRO, you can move between the open documents in a variety of ways. The Window menu contains a list of open documents in the order that you opened them.

To move between documents, do one of the following:

•	Choose the appropriate file from the Window menu.

To move through the open documents in the order that you viewed them:

•	Choose Next, or Previous, from the Window menu.

•	Click on the [image] and [image] toolbar buttons, to move up and down the list of open documents.

•	Press Alt+Left arrow or Alt+Right arrow, to move up and down the list of open documents.

HoTMetaL PRO also allows you to move between documents by following local links. If your current document contains a link to a file on your PC, you can use this anchor to view or edit the linked document.

To follow a link:

•	Right-click on the link. A pop-up menu appears.

•	To edit the linked file, choose Edit Linked Item from the menu. The file opens in HoTMetaL PRO.

•	To view the linked file, choose View Linked Item from the menu. The file opens in your default browser.

You can use this feature of HoTMetaL PRO to edit or view external links (that is, to retrieve files from the Web). These commands are also available from the Tools menu.


Printing documents

You can print the HTML Source view of a document directly from HoTMetaL PRO, or you can print the document from a browser.

To print from HoTMetaL PRO:

•	Switch to HTML Source view.

•	Choose Print... from the File menu.

To print from a browser:

•	Choose Page Preview from the View menu and choose Print from the pop-up menu.

Alternatively, you can launch an external browser and print from that application.


Using the Resource Manager

What's covered in this chapter

The Resource Manager is a powerful tool for keeping all of the documents, Web objects, images, and Assets that you use when developing Websites at your mousetip. You can find out about:

•	The Resource Manager window.

•	The Desktop tab.

•	The Assets tab.

•	The Remote and Network tabs.

•	The Project tab.

•	Moving items around.

•	Managing your assets.

  More on this topic


The Resource Manager window

The Resource Manager is an asset management tool that gives you access to all kinds of Web objects: images, cascading style sheets, scripts, dynamic HTML, and more. It organizes Web objects into categories and enables you to perform 'intelligent' drag and drop operations into your documents. For example, if you drag and drop a background image it is inserted in your document as a background, not as an ordinary image. The Resource Manager also enables you to select different views, create file filters, and navigate through folders. You can also view images as thumbnails before you insert them into your Web page.

To display the Resource Manager:

•	Choose Resource Manager from the View menu, or click on the [image] button.

The Resource Manager contains four tabs: the Assets tab ( [image]), the Desktop tab ( [image]), the Remote tab ( [image]), and the Network tab ( [image]). If you have a project open, there will be a fifth tab, the Project tab.

The Assets tab gives you access to a permanent and dynamic collection of Web objects of various kinds, from which you can perform 'intelligent insertion' operations.

The Desktop tab gives an Explorer-like view of your desktop, from which you can perform ordinary drag and drop of files into your document, and from which you can add your own assets to the collection in the Assets tab.

The Remote and Network tabs enable you to set up remote and network sites that HoTMetaL PRO can transfer files to and from.

The top pane of the Resource Manager is called the Explorer pane. This is where you can browse through folders in a hierarchical tree view. Its navigation is similar to that of Windows Explorer.

The bottom pane of the Resource Manager is called the Contents pane. This is where you can view the contents of the selected folder in the Explorer pane, and drag and drop files into your document.

The Resource Manager toolbar lets you navigate through folders, create new folders, create file folders, and choose view formats for thumbnails. The toolbar is visible in the Desktop, Remote, Network, and Project tabs.

For more information on using the Resource Manager toolbar, see The Desktop tab.

Note: Microsoft Internet Explorer must be installed on your PC in order for the full Assets tab functionality to be available.


The Assets tab

The Assets tab gives you access to a permanent and dynamic collection of Web objects of various kinds, from which you can perform 'intelligent insertion' operations.

Note: Microsoft Internet Explorer must be installed on your PC in order for the full Assets tab functionality to be available.

The Assets tab contains four folders for organizing and categorizing Web objects:

•	cdrom – gives you access to the Web objects on the HoTMetaL PRO CD. See Asset overview for more information.

•	Hmfx – a library of public domain of Web objects supplied with HoTMetaL PRO; this is a subset of the objects available via cdrom.

•	myassets – a folder in which you can build up your own library of Web objects.

•	remote – links to hmfx.com, SoftQuad's asset Website from which you can download from a continuously updated library of Web objects.

Note: The 'cdrom' and 'remote' mechanisms used here are extensible and can be used only by other vendors to create asset CDs or Websites. Contact SoftQuad for more information.

Navigating in the Assets tab

To navigate in the Explorer pane, you can:

•	Click on a folder to open it in the Contents pane.

•	Double-click on a folder to expand it.

•	Click on the [image] icon to expand a folder, or click on the [image] icon to contract it.

Click on the scrollbars to scroll up or down in the Explorer pane.

Dragging and dropping from an Assets folder

The folders in the Assets tab enable you to access Web objects to insert into your documents. To use a sample from one of the Assets folders:

•	Click on the [image] button, or choose Resource Manager from the View menu to open the Resource Manager, if it isn't open already.

•	Click on the [image] tab.

•	Open a folder in the Explorer pane by double-clicking on the folder icon.

You can now navigate around the folder in the Explorer pane and choose images, cascading style sheets, scripts, and dynamic HTML to insert into your Web page. You can view the selected object in the Contents pane.

When you have found an object that you want to put into your Web page:

•	If the object is one that will be inserted at a specific location in the document (for example, an arrow or bullet) drop it at the desired location.

•	If the object is one that the Resource Manager intelligently inserts by generating the appropriate HTML markup (for example, a background image or color) just drop it anywhere in the document.

You can do an ordinary drag and drop with any image by right-clicking on the object and dragging and dropping it.

Downloading Web objects from hmfx.com

The Remote Assets folder in the Other Assets folder in the Assets tab enables you to connect to SoftQuad's hmfx.com  Website to download Web objects to insert into your Web page (you must have an active Internet connection in order to reach this site). To connect to this site using the Remote Assets folder:

•	Open the Remote Assets folder in Other Assets folder of the Explorer pane, by double-clicking on the folder icon.

•	Open the hmfx.com folder. You will be connected to SoftQuad's  hmfx.com Website.

You can now navigate around the hmfx.com Website and choose images, cascading style sheets, scripts, and dynamic HTML to insert into your Web page.

When you have found an object that you want to put into your Web page:

•	Click on the object and drag it onto the HoTMetaL PRO document window just as you would from any of the other asset folders.

SoftQuad will update the hmfx.com Website with new Web objects for you to download and use in your Web pages. Check the hmfx.com Website often.


Asset overview

The Assets shipped with HoTMetaL PRO 6.0 Evaluation Version are a subset of those provided with the retail version. Choose 'How To Purchase' in the Help menu for ordering information.

This section gives an overview of the assets included with HoTMetaL PRO. Depending on the choices you made when you installed HoTMetaL PRO, subsets of these are available in the Installed Assets folder. The entire collection is available by opening the CD Rom Drives folder in the Other Assets folder. You can install all of the Assets using the Custom Install feature during the HoTMetaL PRO installation.

Each asset is displayed in a page in the Contents pane that contains instructions for inserting the object into your pages.

•	Button Maker: The Button Maker folder contains a utility for creating dynamic button images on-the-fly and drop them into your documents. Choose backgrounds, fonts, colors, and other details for the default, mouseover, and mousedown states of your button. For more details, see Creating Buttons.

•	Calendar Builder: Calendar Builder: the Calendar Builder folder contains a tool that will generate a table corresponding to the calendar page for a specified month and year. This table can be dragged and dropped into your document.

•	Color palettes: Color palettes: the Color Palettes folder contains browser-safe color palettes that you can use to set basic document colors, and table background colors

•	Basic Page Colors: Click on the icon corresponding to the color property you want to set (background, text, row background, etc.) Click and the drag the color into the document. To remove a specific property color, click on the property button and drag the text Remove Color into the document window.

•	Table Painter: Click on the icon representing the table property you want to set a color for (Table, Row, Cell). Drag and drop a color from the palette into the document window. For specific rows and cells, drag the color over the desired row or cell. To remove a color from a table, row, or cell, click on the appropriate button and drag the text Remove Color over the table property. Note you must select the same table property as was used to apply the color (table, row, cell).

•	Drop capitals: The Drop Capitals folder contains images for drop capital letters that you can drag into your document. While the drop capital images have transparent backgrounds, you should choose the drop capital from the folder most appropriate to your page: For Light Backgrounds or For Dark Backgrounds.

•	Dynamic buttons: The Dynamic Buttons folder makes it easy to create browser-independent dynamic images that react to mouse movements and clicks. Click the Dynamic Buttons (Create) folder to display the Dynamic Button asset. Choose the default, mouseover, and mousedown images for your image. You can test the image in the Contents pane before dragging and dropping it in to your document. You can also drag the dynamic image asset you created into the Dynamic Buttons (Saved) folder. When you drag and drop into the document, the image is placed and the script inserted into the document.

•	Dynamic HTML: The Dynamic HTML Utilities folder contains useful scripts that you easily configure and drag into your pages, including a browser sniffer, a way to break out of a frames page, a personal hit counter, a cookie setter, and a script to produce a 'ticker tape'. Click on the desired folder to access the script.

•	Dynomat Menus: The Dynomat Menus folder contains a tool for building Dynamic HTML cascading menus, courtesy of Webreference.com. You configure the menu items and subitems by clicking on the Configure button, then drag the menu into your page.

•	Fonts: HoTMetaL PRO includes fonts for use in your pages. The CD Rom Drives folder contains the HoTMetaL Decor Fonts folder. This folder contains links to public domain fonts that you can install on your system.

•	Forms: The Forms folder contains various form elements and corresponding validating scripts to check that the form has been filled out properly. You can drag and drop an entire standard form with all of the validation, or specific form fields, such as email addresses, phone numbers, etc.

•	HotBot Search Tool: Give your users instant access to HotBot's Web search engine using the HotBot Search Tool asset. Simply drag and drop one of the search links into your document and you're instantly linked to HotBot. Note that the images used are linked directly to the HotBot site through a URL so that they will always be up-to-date.

•	Images: The Images folder contains a wide variety of Web images for use in your pages. Working from the CD Rom gives you access to the most images, including the HoTMetaL PRO decor image sets. (If you custom installed everything to your hard drive, then these images are accessible from the Installed Assets folder.

The following folders contain images of various kinds: Arrows, backgrounds, Banners, Bullets, Buttons, Clipart, Link Buttons, Mouseover Buttons, and Rules.

The SMDecors folder contains folders of objects from the decors used by Site Maker. These folders contain all of the objects you need to create a unified look and feel for your pages.

•	Rules: The Rules folder contains images to use as horizontal rules in your documents. You can specify that the image have a fixed pixel size or stretch to fit a certain percentage of the browser window using the drop-down menus and text box. If you don't specify a size, the default image size will be used.

•	Meta Tagger:  The Meta Tagger folder contains easy interfaces for entering META elements into the HEAD element of your document. To place any of the META tags, click on the desired subfolder of the Meta Tagger folder, and fill in the required information. Then drag the tags into your document.

•	Multimedia: The Multimedia folder contains objects such as Java applets, sounds, Quicktime and AVI movies, Shockwave objects, and VRML Worlds. Simply click on the desired folder and drag the object into your page.

•	Stylesheets:The Stylesheets folder contains examples of CSS style sheets that you can link to your document. To create the link to the style sheet, drag the button into your document. HoTMetaL PRO copies the style sheet to the folder containing your document in a folder called styles. When you click on a folder in the Explorer pane, examples of the selected style sheet properties are displayed.

•	Text and code: You can drag any text or HTML markup from your documents into the Text and Code asset page to create simple, reusable objects. In your document, select the text or code you want to reuse and drag it into the Text and Code asset page. You will be prompted for a description. Note: the raw ASCII source code or text will be recreated exactly when the Text Asset is dropped back into a document. Since links are not changed in any way, this type of Asset works very well when you URLs are relative to the Web server root, and begin with a leading forward-slash ('/').


Creating your own assets

Over time you may wish to build up your own collection of assets and incorporate them into the Resource Manager collection, in order to take advantage of its 'intelligent insertion' capabilities. You should store these files in new or existing folders underneath the myassets folder.

Creating a new folder in the My Assets folder

In the myassets folder you can create your own folders to organize and categorize Web objects to insert into your documents. It is recommended that you add folders only to myassets. To create a new folder in the myassets folder:

•	Click on the [image] tab in the Resource Manager. The Assets tab opens.

•	Open the myassets folder.

•	Right-click on the myassets folder and choose New Folder from the pop-up menu. The New Assets Folder dialog box appears.

•	Enter a name for the new folder in the Folder Name text box.

When you create a new folder in myassets, you must specify what types of objects you are going to put in that folder.

•	Choose an asset type from the Type of Assets pull-down menu. If you will be saving more than one type of object in this folder, choose Assorted. Choose Text if you are creating HTML or JavaScript assets.

•	Click on OK. The new folder appears in the myassets folder.

Note: You can create your own asset types and make them available in the Asset Manager. See the chapter 'Configuring the Asset Manager' in the HoTMetaL Programmers' Guide. Knowledge of JScript/JavaScript is required in order carry out this kind of customization.

You can now drag and drop objects from the Desktop tab or HoTMetaL PRO document window into the new folder.

The Asset tab's contents correspond to the folder Assets in the HoTMetaL PRO 6.0 folder. If you add a folder to this folder using Windows Explorer, and click on the new folder in the Explorer pane of the Assets tab, the Contents pane will display a 'Convert to Assets' page. Click on the Convert button in this page to perform the conversion. You will be prompted to choose specific files and the Asset type.

Note: You can change the top-level folder displayed in the Assets tab by changing the assets_path setting in the Windows\hmpro6.ini file.

Renaming a folder in My Assets

To rename a folder in myassets:

•	Click on the folder to select it.

•	Choose Rename from the Edit menu, or right-click on the folder and choose Rename from the pop-up menu, or click on the name of the folder.

•	Type in the new name for the folder and press Enter.

Deleting a folder in My Assets

To delete a folder in myassets:

•	Click on a folder to select it.

•	Right-click and choose Delete from the pop-up menu. The folder is deleted.

Storing objects in the My Assets folder

You can add assets to folders in the myassets folder. If the asset you wish to add doesn't fit into the existing categories in the myassets folder, you can create a new subfolder to contain them. To put an object in an folder in the myassets folder:

•	Click on the [image] tab in the Resource Manager.

•	In the Explorer pane, navigate through your system for the object that you want. Files are displayed in the bottom pane, the Contents pane.

•	Click on the object and drag it onto the [image] tab. The Assets tab will open.

If the assets folder into which you want to drag the object is currently open in the Contents pane, you can simply drop it at the desired location. If the desired folder isn't open, you can navigate to it in the Explorer pane:

•	Without releasing the mouse button, drag the pointer over the Explorer pane.

•	If the folder you want is not visible, move the pointer to a position just above the bottom (or just below the top) of the pane, and the pane will scroll.

•	When the desired folder is visible, move the pointer over it.

•	If the pointer turns into a 'no' sign, you cannot drop the file directly into this folder (because it has sub-folders) but if you hover over the folder for several seconds, it will open up and display its subfolders.

You can repeat this process until you get to a drop-capable folder.

•	Drop the object.

•	If the folder has been assigned an asset type of Assorted, a dialog box will appear prompting you to select the type of asset the object is (for example, clip art). Enter a description for the object in the Description text box and click OK.

•	For certain object types, you will be prompted to enter some extra information about the object; for example, alternate text for an image. Enter this information and click on OK.

The object that you selected will appear in the Contents pane.

You can put as many files as you like into a folder by dragging and dropping them.

Deleting Web objects in a folder

To delete Web objects (images, cascading style sheets, scripts, or dynamic HTML) in the myassets folder:

•	Right-click on the Web object (image, cascading style sheet, script, or dynamic HTML) in the Contents pane and choose Delete from the pop-up menu. The Web object is deleted.


The Desktop tab

Desktop gives you access to your PC's desktop. You can choose Web objects from your system to put into your Web pages, or save in the collection in the Assets tab.

Note: Microsoft Internet Explorer must be installed on your PC in order for the full Desktop tab functionality to be available.

Browsing in the Desktop tab

To browse in the Desktop tab:

•	Click on the [image] button, or choose Resource Manager from the View menu to open the Resource Manager, if it isn't open already. The Resource Manager window opens.

•	Click on the [image] tab in the Resource Manager.

The top pane of the Desktop tab is called the Explorer pane. This is where you can browse for files on your system. Its navigation is similar to Windows Explorer.

The bottom pane of the Desktop tab is called the Contents pane. This is where you can view files in various formats.

The Resource Manager toolbar lets you navigate through folders, create new folders, create file filters, and choose view formats for thumbnails.

Navigating in the Explorer pane

To navigate in the Explorer pane, you can:

•	Click on a folder to open it in the Contents pane.

•	Double-click on a folder to expand it.

•	Click on the [image] icon to expand a folder, or click on the [image] icon to contract it.

Use the scrollbars to scroll up or down in the Explorer pane.

Use the [image] button in the Resource Manager toolbar to go up one folder in the folder tree.

Creating a new folder

To create a new folder:

•	Click on the [image] button, or right-click in the Contents pane and choose New Folder from the pop-up menu.

•	Enter a name for the folder and press Enter.

•	To move or copy files to the new folder, just select, drag, and drop them as you normally would.

•	To update the Desktop tab, click on the [image] button, or right-click in the Contents pane and choose Refresh from the pop-up menu.

Creating file filters

You can select specific types of files to be viewed in the Contents pane using the File Filter menu. For example, if you want only .gif images to be displayed in the Contents pane:

•	Select the Contents pane by clicking on it.

•	Click on the [image] button. The Add New File Filter dialog box appears.

•	Enter *.gif in the text box. The asterisk indicates that any file name with a .gif extension will be displayed in the Contents pane. By default, all file types (*.*) are displayed in the Contents pane.

Click on the [image] button to show all files in the folder.

The [image] button opens a drop-down menu that lets you select file filters that have been added.

Thumbnail view options

You can select different thumbnail view options from the Resource Manager toolbar. To select different thumbnail view options:

•	Click on the [image] arrow icon from the Resource Manager toolbar.

You can choose the following views from the pull-down menu:

•	Large Icon – shows the files with large icons.

•	Small Icon – shows the files with small icons.

•	List – shows the files in a list format.

•	Details – shows each file's name, size, file type, modification date, and attributes.

•	Thumbnail – shows image files as thumbnails.

•	Choose Thumbnail to view the files as thumbnail images, or click repeatedly on the [image] button to cycle through the different viewing options.

You can increase the size of the thumbnails in the Contents pane:

•	Click on the [image] icon in the menu to make the thumbnails bigger or click on the arrow beside the magnifying glass [image] and select the size that you want the thumbnails to appear. Click on [image] to make the thumbnails smaller.


Working with images

What's covered in this chapter

Images are one of the reasons the Web has become so popular. While your pages don't require images, they can make them more interesting to look at, and can help you to communicate your ideas. Here's what you'll learn:

•	Web image basics.

•	Displaying images in HoTMetaL PRO.

•	Inserting images into your page.

•	Creating 'hot' images.

•	Creating buttons.

•	Multimedia files.

•	Images and accessibility.

•	Creating clickable image maps.

•	Image tips and tricks.

In part, the Web is distinguished from other Internet applications (for example, Usenet) by its ability to display inline images. Images have become more important to creating Web documents as the layout and display capabilities of Web browsers has become more sophisticated. Using HoTMetaL PRO, you can insert and display many different image formats in the document window, then use the power of PhotoImpact SE (shipped with HoTMetaL PRO 6.0 but not available in the Evaluation Version) to edit your images for the Web.

  More on this topic


Web image basics

While you don't need to be a graphics wizard to insert an image into your page, before you begin it's a good idea to understand a bit about how images are displayed in HoTMetaL PRO and in Web browsers. If you're already familiar with using images on the Web, you can skip ahead .

Images can enhance the appearance of your page and make it easier to communicate your ideas, but they also increase the time it takes for someone to load your page over the Internet. Here are some guidelines for using images in your Web pages:

•	Try to keep your file sizes small. You can achieve this by keeping the actual dimensions of the image small, and also by reducing the number of colors that are stored in the file. You can use graphics software such as PhotoImpact SE (shipped with HoTMetaL PRO 6.0 but not available in the Evaluation Version) to reduce the number of colors in individual image files.

•	Don't rely exclusively on images to convey your information For example, using only a logo image to give the name of your company means that not everyone will get that important information.

•	Use alternate text for images. Providing a short text description of the image in its ALT attribute makes your page accessible to more people. Not only do some Web surfers still use text-based browsers like Lynx, or surf with images turned off in their browsers to speed up download time, but also people with visual impairments use voice synthesis technology to surf the Web. By taking the time to enter a meaningful description of your image you don't exclude these people from sharing your Web page. Providing a short description of the image also allows people to find specific images more easily if they are using a search engine, such as Excite or Yahoo, in a Web browser.

•	Don't use background images that make it difficult to read the text of the page.

  More on this topic


Available image formats

HoTMetaL PRO can display many different image formats (for example, BMP, TIFF, JPEG, PNG, GIF) in the document window. Not all of these image formats are available to Web browsers, however, so you should convert the images before you upload them to the Internet or an intranet. The most common image format on the web is GIF.

All browsers that are capable of displaying images can display GIF files. Most newer browsers can also display JPEG images, and some browsers can display other platform-specific image types. If you want your Web pages to be viewed by the broadest possible audience, however, make sure that your images are in GIF or JPEG format.

Note: HoTMetaL PRO also supports the PNG image format (portable network graphic), which is a standard file format endorsed by the World Wide Web Consortium. While few browsers currently display this graphics format inline, future releases of Microsoft Internet Explorer and Netscape Navigator will support PNG graphics.

GIF or JPEG?

While GIF files were once the standard image format on the Web, most browsers now support JPEG files as well, and many people are confused about which file format is 'better' for their Web images.

In fact, the two file formats are both good at specific tasks. The GIF format uses a maximum of 256 colors, and uses combinations of these to create colors beyond that number. The GIF format is better for displaying images that have been designed using a graphics program, like logos, icons, and buttons. JPEG files can contain millions of colors, and are much better for photographic images.

GIF images come in two different versions and have some extra functionality that JPEGs do not. You can save GIF images in GIF 87 or GIF 89a format. GIF 89a is newer and has the following features that GIF 87 and JPEG files do not:

•	Interlacing – if you save a GIF 89a image as interlaced, the browser will be able to display the image as it loads, getting gradually crisper and clearer until it is finished. Interlaced GIFs have slightly larger file sizes than non-interlaced GIFs, so you will have to decide whether the interlacing effect is worth the extra download time for your images.

•	Transparency – with GIF 89a format images you can set a single color to be transparent, that is, it will allow the background color or image to show through it. Transparency is most commonly used to make the rectangular background canvas of an image invisible; this feature can be very effective in Web page design. The image editing software included with HoTMetaL PRO, Ulead PhotoImpact SE, (shipped with HoTMetaL PRO 6.0 but not available with the Evaluation Version) makes it easy to save transparent  GIFs.

•	Animated GIFs – GIF 89a images can also be animated using special software. Animated GIF images are simply a number of GIF images saved into a single file and looped. Netscape Navigator and Microsoft Internet Explorer can both display animated GIFs, but many other browsers cannot, and may not be able to display even the first image in the loop. Use animated GIFs with caution. HoTMetaL PRO includes Ulead's GIF Animator software (shipped with HoTMetaL PRO 6.0 but not available in the Evaluation Version) so you can create your own animated GIF images.

JPEG images don't give you the option of including transparency or of interlacing images, but they do allow you to specify the degree of file compression so that you can create a balance between image quality and file size..


Image color

One of the most difficult aspects of working with computer images—especially over the Internet—is color. Good Web designers must always keep in mind that the images they put on the Web may look different on different machines depending on the user's display capabilities. This section gives a general overview of some image color issues. The Ulead PhotoImpact SE (shipped with HoTMetaL PRO 6.0 but not available in the Evaluation Version)online help contains a detailed discussion of image colors.

Image dithering

Keep in mind that, while your images may look fine on your computer, they may not look as good on other computers that may have fewer colors in their displays. Many users will have computers that have 8 bit displays, that is, they can display a maximum of 256 colors. This means that if a user loads a true-color (millions of colors) JPEG image, the browser has to use two pixels of different colors in combination to create colors above the 256 colors available. This process is called dithering. Because dithering uses two pixels to create a single color, it reduces the image quality.

Browser palettes

In addition, Web browsers use their own internal color palettes (tables of pre-defined colors available to create color images) to display images, which can sometimes result in your true-color images looking different in your browser. Many of the images provided with HoTMetaL PRO are true-color images, and may lose some of their quality on some systems and in some browsers.

Multiple palette problems

If you have a number of GIFs that will appear in a single browser window, you should take steps to maintain the image quality by making sure that their color palettes are compatible. For example, if you have two images, one with 200 shades of red and one with 150 shades of green, your total number of colors is more than 256. On systems that can display only 256 different colors, the browser will have to combine the palettes of each of these images and then dither both images to use the custom color palette. This results in lower image quality for both images. It's best to use a 'browser safe'  palette for all of your GIF images.


Displaying images in HoTMetaL

HoTMetaL PRO can display graphics in many different formats, including BMP, PNG, JPEG, GIF, TIFF, and others. Images displayed in the HoTMetaL PRO document window are displayed as they would be in a browser, including image size and, if applicable, transparency. HoTMetaL PRO also displays background images.

All browsers that are capable of displaying images can display GIF files. Most newer browsers can also display JPEG images, and some browsers can display other platform-specific image types. If you want your Web pages to be viewed by the broadest possible audience, however, make sure that your images are in GIF or JPEG format.

You can configure HoTMetaL PRO to display or hide images and background graphics. The default settings for all documents are configured in the View tab of the Options dialog box (choose Options... from the Tools menu): you can choose whether inline and background images should be displayed in the window or not. This choice will then apply by default to all new documents.

You can override the inline images Options setting for individual documents using the Show/Hide Inline Images commands in the View menu. If you don't want images to be displayed in the document, choose Hide Inline Images. The command will then toggle to Show Inline Images: if you choose this command, HoTMetaL PRO will resume displaying inline images.

You cannot override the Options dialog for background images settings in individual documents.


Inserting images into your page

When you insert an image into your page you are actually creating a link to a graphic file using a URL. The Web browser puts the two together when you load the page. Similarly, HoTMetaL PRO displays the image within the document window so you have an idea of how it will look in the Web browser, although the WYSIWYG view does not exactly match a browser display. If you look at a document containing an image in HTML Source View or Tags On view, however, you will see that the image is represented by an IMG element.

You can insert images into your page by dragging and dropping, or from the HoTMetaL PRO toolbars and menus. HoTMetaL PRO also gives you other powerful ways to browse for images for your page, then drag and drop them where you like. These are the  Image Explorer  (not provided with the Evaluation version) and the Resource Manager .

  More on this topic


Inserting images from the toolbars or menus

To insert an image using the toolbars or menu commands:

•	Place the insertion point at the location where you want the image to appear in the document (the document cannot contain a selection).

•	Click on the [image] (Insert Image) toolbar button or choose Image... from the Insert menu.

The Image Properties dialog box appears.

Because images in HTML are represented by links, you have to specify the location of the image file the same way you would for any other kind of link. This information is required.

To specify the image file location:

•	Enter the Internet address (URL) for the file in the Image File text box. (If you need more information on URLs, see the Links help.)

Or:

•	Click on Choose... and browse for the file.

In this dialog box you can specify alternate text, alignment, width, height, and border width. You can also click on Edit Image Map Name  if an image map is associated with this image.

 You can bring up this dialog to edit an existing image's properties in one of three ways:

•	Double-click on the image.

•	Right-click on the image and choose Image Properties... from the pop-up menu.

•	Click on the image and then click on [image] again.

You can also edit all of the image's properties using the Attribute Inspector and edit the image map name.


Alternate text

The Alternate Text text box in the Image Properties dialog box is for entering some text that will be displayed if the document is being read with a browser that can't display images or one that has image loading turned off. Some browsers display alternate text while the images are loading, or in a pop-up window when the cursor is over the image. Even though this information is not required, it is good HTML style to include it for the benefit of users without graphical browsers. Since alternate text is indexed by some search engines, providing a short description of the image allows people to find it more easily. Using meaningful alternate text also makes your page accessible to people with visual impairments who use assistive technology to surf the Web.


Alignment

The default alignment for images is BOTTOM, meaning that the bottom of the image will be on the baseline of the adjacent text. You can choose an alignment value from the Alignment pull-down list in the Image Properties dialog box.

You can set the image alignment to the following:

•	MIDDLE – Aligns the baseline of the current line with the middle of the image.

•	TOP – Image aligns with the top of the tallest item in the line.

•	LEFT – Image 'floats' on the left margin and text wraps around it to the right.

•	RIGHT – Image 'floats' on the right margin and text wraps around it to the left.

•	TEXTTOP – Image aligns with the top of the tallest text in the line.

•	BASELINE – Same as BOTTOM.

•	ABSMIDDLE – Aligns the middle of the current line with the middle of the image.

•	ABSBOTTOM – Aligns the bottom of the image with the bottom of the current line.

Not all of these image alignments are supported by all browsers, so use them with caution and make sure that your page looks acceptable on several different browsers.

For left and right images, text wraps around the image, but the IMG tag remains inline to indicate its actual location in the document.

Note that there is no 'center' alignment: if you want to center an image, surround it with a block element (such as P) that you can then center-align. Some browsers also support the CENTER element, which you can put around the image.


Width and height

When you insert an image—by dragging and dropping or any other means—HoTMetaL PRO will automatically set the height and width attributes. These properties are measured in pixels; they tell the browser how large an image is. This will speed download times and page formatting. Height and width are not supported by all browsers, but do make a large difference to how fast a web page formats in many browsers. If you wish to change these values, you can edit them using the Height and Width text boxes in the Image Properties dialog box.

Note: Some browsers accept percentage values for the height and width. The percentage value represents a percentage of the window size. This can be useful for graphics that resize with the window, such as graphical horizontal rules.


Border

The Border field in the Image Properties dialog box enables you to put a border around the image. Typing in a number value represents the width of the border, in pixels, around the image. The default value is 0; this indicates that there is no border around the image. One of the most common uses for the border value is setting it to 0 to remove the blue border that will appear around an image if it is surrounded by a link (A element).

•	Enter the desired value.


Spacing

Some browsers support the image attributes VSPACE and HSPACE.

To edit these attributes:

•	Right-click on the image and choose Attribute Inspector from the pop-up menu.

Or:

•	Click on the image and choose Attribute Inspector from the View menu.

Or:

•	Press F6.

You can specify blank space on the top and bottom (VSPACE) and on the sides (HSPACE) of an image. The value is in pixels. This can be very useful for trying to create a more precise layout.


The image pop-up menu

 Ulead PhotoImpact SE is shipped with HoTMetaL PRO 6.0, but not with the Evaluation Version that you are now using. Therefore, when you choose Edit Image File or View Image File, HoTMetaL PRO will try to carry out one of the following actions, in the order given:

•	If you have associated a helper application with the file extension of the current image, that application will be launched.

•	If you have selected a default image editor by choosing Image Editor from the Tools menu, that application will be launched.

•	Otherwise, you will be prompted to choose an application.

When you right-click on an image in the HoTMetaL PRO document window the image pop-up menu is displayed:

•	Edit Image File – Starts the image editor and loads the image file. The default image editor is Ulead PhotoImpact SE. You can choose different helper applications for editing specific image types from the Options dialog .

•	View Image File – Starts the image viewer and displays the image file. The default image viewer is Ulead PhotoImpact Viewer SE. You can choose different helper applications for viewing specific image types from the Options dialog.

•	Image Properties... – Brings up the Image Properties dialog.

•	Select Element – Selects the IMG element to cut or copy.

•	Attribute Inspector – Lets you edit all of the properties of the IMG element, including extensions.

  More on this topic


Choosing helper applications

PhotoImpact SE and PhotoImpact Viewer SE are the default image editor and viewer, and, additionally, specific image types can have an editor and viewer associated with them. If an image type has an editor or viewer associated with it, this setting overrides the default editor or viewer.

To change the default image editor and/or viewer, open the file Windows\hmpro6.ini and edit the following settings:

default_image_editor

default_image_viewer

You can change the default editor and viewer for a particular image type from the Options dialog. These applications will be launched instead of the default when you choose Edit Image File or View Image File for a file of that type.

•	Choose Options... from the Tools menu.

•	Click on the Helper Apps tab.

•	Enter the file extension for the image type in the File Extension text box. If files of that type could have more than one extension (for example, .jpg and .jpeg), you will have to make a separate entry for each.

•	Click on Add New Type.

•	You can choose an editor, viewer, or both. Enter the locations and filenames of of the desired applications in the Viewer and Editor text boxes (you can use the Choose... button to select them).

•	Click on OK.


Creating 'hot images'

A 'hot image' is a hypertext link from an image rather than from some text. You can use images to link to Internet destinations, start scripts, and other events that you can start by clicking in a browser.

To make an image 'hot':

•	Do one of:

•	In Tags On view, select the image by clicking on the image tag.

•	In WYSIWYG view, right-click on the image and choose Select Element from the pop-up menu.

•	Click on the [image] (Insert Link) toolbar button, choose Link... from the Insert menu, or press Ctrl+K.

 This brings up the Insert Link dialog box.

•	Type the destination of the link (URL) in the Insert Link dialog box.

•	To prevent the browser from displaying a link color border around the 'hot' image, set the value of the image's BORDER attribute to 0 (zero) using Attribute Inspector.

•	Double-click on the image to bring up the Image Properties dialog.

•	Set Border to 0 (zero) if it doesn't have that value already.

Note: While you can have images outside of block elements such as paragraphs, you cannot have link elements outside of block elements. If HoTMetaL PRO prevents you from inserting the link around the image, first surround the image with a paragraph, header, or other block element.


Creating dynamic buttons

The Button Maker application enables you to design both static buttons and buttons for mouseover and mousedown effects. Using the button maker, you can choose background images, fonts, and colors to create custom buttons to use when creating mouseover buttons in the Asset Manager.

The Button Maker is run from the Assets tab of Resource Manager. If the Resource Manager is not displayed:

•	Choose Resource Manager from the View menu, or click on the [image] button.

•	In the Installed Assets folder in the [image] tab, navigate to the Button Maker folder and follow the instructions to start the Button Maker.

Four versions of the button you want to create are displayed:

•	 The Default image (displayed when no mouse action is applied to the button)

•	The Mouseover image (displayed when the mouse cursor is over the button)

•	The Mousedown image (displayed when the button is clicked on)

•	The Button Preview window

These windows are initially displayed adjacent to one another, but you can move them around individually if you like.

•	Click directly on on the top (Default) image (that is, on the image itself, not the title bar).

•	Enter the desired label text in the Label text box.

•	Choose a Font, Font Style, and font Size.

•	Click on Smooth if you want to smooth the font edges.

•	Click on the [image] button.

•	Choose a text color from the Choose Color dialog.

•	If you want to adjust the positioning of the text, click on one or more of the Off center by arrows.

•	Repeat these steps for the other two images (Mouseover and Mousedown).

•	When done, test how your button looks by moving the mouse over the Button Preview window, and then clicking on it.

•	If you want to change the background image for one or more of the buttons, click on the button, or Ctrl+Click on two or more buttons and then click on the [image] button.

You can change a feature of all three buttons simultaneously:

•	Click on Select All and make any changes.

•	When you are satisfied with the click on Save or Save All to save the images one at a time or all at once.

If you choose Save, you will be prompted for a location and filename for the currently selected button (the button is saved in GIF format). If you choose Save All you will be prompted for a location and name for each of the default, mouseover, and mousedown versions of the button.

To ensure that the buttons use the browser-safe color palette, click on the Browser-Safe button.


Inserting multimedia files

HoTMetaL PRO supports elements and attributes for inserting multimedia files such as sound and video, as well other special formats (for example, ShockWave) that require plug-ins in order to be displayed in the browser.

To insert any element referred to here, choose Element... from the Insert menu.

To edit the attributes of an element, put the insertion point inside the element and choose Attribute Inspector from the View menu.

It is easiest to work with this kind of element if you switch to Tags On view.

Sound files

Some common sound formats are MIDI, WAV, and AU. Netscape browsers use the EMBED element  to represent sound files. Microsoft Internet Explorer uses the BGSOUND element. BGSOUND must be inserted before any 'block' elements in the document. The attributes of BGSOUND are:

•	SRC: the URL of the sound file.

•	LOOP: how many times the file plays (the value -1 or INFINITE causes it to play over and over).

•	DELAY: the number of seconds between each repetition.

•	TITLE: an identifying title.

Normally you should use both EMBED and BGSOUND so that your file can be played by both types of browsers.

Video

Video files often require a browser plug-in in order to be displayed. If in doubt, you should contact the vendor for the file format that you wish to use, to obtain details on the markup (elements and attributes) required for that format, and any plug-in(s) required to display it.

 Microsoft Internet Explorer and the Netscape browsers use the EMBED element  to represent video files. Internet Explorer also supports the IMG element for playing some video formats. The following IMG attributes are used for video:

•	DYNSRC – the URL of the video file.

•	START – This attribute specifies when the video file will be played. The value FILEOPEN causes this to happen as soon as the HTML document is opened; the value MOUSEOVER causes the video to be played when the mouse cursor is over the animation. If you supply both values, the video will be played in both situations.

•	 CONTROLS – If this attribute has the value CONTROLS, a set of controls will be displayed under the video.

•	LOOP – Specifies how many times the video should be played. The value '-1' or INFINITE will cause it to be played over and over.

Other multimedia formats

Other multimedia formats (for example, ShockWave) require a browser plug-in in order to be displayed. If in doubt, you should contact the vendor for the file format that you wish to use, and to obtain details on the markup (elements and attributes) required for that format, and any plug-in(s) required to display it.

 Microsoft Internet Explorer and the Netscape browsers use the EMBED element  to represent multimedia files.

  More on this topic


Inserting multimedia files with EMBED

Web browsers let you use the EMBED element to insert a 'object' in an arbitrary format (sound, movie, etc.) into the document. These objects will be processed by 'plug-in' applications. The essential attributes of EMBED are:

•	SRC – The URL of the file to be embedded.

•	HEIGHT– The height of the displayed image.

•	WIDTH – The width of the displayed image.

•	 NAME – giving the object a target name allows other objects and elements to refer to it.

The following EMBED element attributes are currently used only by Netscape Navigator:

•	ALIGN – Sets the alignment of the text around the controls in the same way as the ALIGN attribute in the IMG element. It can have the same values: TOP, BOTTOM, CENTER, etc.

•	BORDER – Specifies the width of the border (in pixels)

•	FRAMEBORDER – If this attribute has the value NO, no border will be drawn around the object

•	HSPACE – Specifies extra space that the browser draws to the right and left of the embedded object (in pixels)

•	PALETTE – An embedded graphical object uses either the foreground or background color palette. Choose FOREGROUND or BACKGROUND. (The default is BACKGROUND.)

•	PLUGINSPAGE – Allows you to specify a URL from which the user can download the necessary plug-in.

•	TYPE – Specifies the MIME-type. Either this attribute or the SRC attribute must have a value.

•	UNITS – Specifies whether WIDTH and HEIGHT values are to be interpreted as pixels or en dashes.

•	VSPACE – Specifies extra space that the browser draws above and below the embedded object (in pixels)

The following EMBED element attributes apply only to Netscape Navigator's LiveAudio plug-in:

•	AUTOSTART – Setting the attribute value to TRUE starts playing the sound automatically when the page is loaded into Netscape Navigator. The default is FALSE.

•	STARTTIME – Designates where in the sound file to begin playback. For example, to start playing the file at the forty-five second mark, enter '00:45'. (This will work only for the Windows 95, Windows NT, and Macintosh versions of Netscape Navigator.)

•	ENDTIME – Designates where in the sound file to end playback. For example, to finish playing at the one minute mark, enter a value of '01:00'. This is an absolute time measured from the beginning of the sound file; it is not the time elapsed from the STARTTIME attribute value. (This will work only for the Windows 95, Windows NT, and Macintosh versions of Netscape Navigator.)

•	HIDDEN – Hides the controls for an embedded sound object (this attribute may work for other types of EMBED elements, as well). You should give this attribute a value of TRUE to hide controls and have the sound file load as a background sound. (The attribute FALSE is not valid—if you don't want to hide the object controls, do not include the HIDDEN attribute.)

•	CONTROLS – Defines which control will appear in the Web browser for a given embedded object. This attribute can have the values CONSOLE, SMALLCONSOLE, PLAYBUTTON, PAUSEBUTTON, STOPBUTTON, and VOLUMELEVER. The default is CONSOLE. Only one control is allowed in each EMBED element. To have more than one control for a single sound or video, you must use separate EMBED elements with the same NAME attribute. Netscape's page on LiveAudio explains how to use multiple controls.

•	HEIGHT – Sets the value of the height of the console or control, in pixels. The default values of the controls are:

CONSOLE 60 SMALLCONSOLE 15 VOLUMELEVER 20 BUTTON 22

•	WIDTH – Sets the value of the width of the console or control, in pixels. The default values of the controls are:

CONSOLE 144 SMALLCONSOLE 144 VOLUMELEVER 74 BUTTON 37

•	MASTERSOUND – When using multiple controls for a single embedded sound, this attribute denotes which EMBED element's SRC attribute refers to the main sound file. This attribute is required when you use multiple controls. Netscape's page on LiveAudio explains how to use multiple controls for that plug-in.

•	NAME – Assigns a name to the embedded sound or control. In the case of multiple controls for a single sound, you must assign each of the controls the same name. Netscape's page on LiveAudio explains how to use multiple controls for that plug-in.

Netscape Navigator also allows you to insert variable or application-specific attributes in the EMBED element. These cannot be represented in SGML and therefore are not supported by HoTMetaL PRO's WYSIWYG view or Tags On view. If you want to insert such attributes, you should open the HTML file in HTML Source view and insert the attributes manually, inside the EMBED start-tag. The file will not validate if you switch to Tags On or WYSIWYG view; HoTMetaL PRO will attempt to 'fix' the application-specific attributes.


Images and accessibility

While images are part of what makes the Web so popular, many people either cannot, or do not wish to, view images on the Web. Some of these people do so by choice, either turning the image display options off in their browsers, or using text-only browsers such as Lynx. On the other hand, users with visual impairments require assistive technology, such as screen readers, which generally cannot interpret images. There are a few simple things you can do to ensure that you make your pages accessible to people who cannot or do not wish to view images.

If you have Prompt for Accessibility turned on in the General tab of the Options menu, the Image Properties dialog will contain an Accessibility panel. It also prompts you to enter an alternate description of the image. This description should be brief, but at the same time meaningful; that is, simply putting graphic in the alternate text box won't help users understand what the graphic's purpose is while putting graphic: SoftQuad logo will.

HoTMetaL PRO was designed with accessibility issues in mind. The Accessibility panel gives you the option of writing a more detailed description of the image. This description is saved in an HTML file; HoTMetaL PRO generates a link to this file and places it next to the image in your document.

To add a detailed description in the Accessibility panel:

•	Click on Description... in the Accessibility panel; this brings up a text box.

•	Type a detailed description of the image, including the information it conveys to the viewer.

•	Type a file name for the image, the default is the image filename plus '-desc'.

 The description is saved as an HTML file. You can also choose an existing file by clicking on the Choose... button. (Some authors prefer to keep all the descriptions in a single file, rather than adding a number of small files to the site.) HoTMetaL PRO will insert a small letter 'd' (which links to the description page) beside the image.


Creating clickable image maps

Image maps (or clickable image maps) are images that have been divided into regions; clicking in a region in a browser causes an action to occur (usually a link to another location). There are two types of image maps: client-side and server-side.

With client-side image maps, all of the information required for the browser to process the image map is contained in the document itself. This information includes a list of the co-ordinates that define the mapping regions, and the actions (for example, hypertext links) they are associated with. With server-side image maps, this information is in a separate map file.

Most Web browsers support server-side image maps, and client-side image maps are now also widely supported. You can use both a server-side and a client-side image map for the same image: if the browser accepts client-side image maps, then they will take precedence over server-side image maps.

Good HTML style involves giving users who do not have access to image map features an alternate way of accessing the pages that are linked to in an image map, for example, a text-only list. For more information see the accessibility help for client side and server-side image maps.

  More on this topic


Server options for server-side image maps

There are two different types of Web servers: NCSA and CERN, and they require slightly different server-side map file formats. Before you create any server-side image maps, specify your server type (you may need to obtain this information from your ISP or system administrator):

•	Choose Options... in the Tools menu.

•	Click on the General tab.

•	In the Image Map Files group in the lower right corner of the tab, choose one of Save in NCSA format and Save in CERN format.

•	Click on OK.


Creating image maps

To create an image map:

•	Right-click in the background of the toolbar area and choose Image Mapping from the pop-up menu.

•	Click on the image that you want to use as an image map.

The image mapping toolbar provides tools for defining 'hot' areas of different shapes: circle, rectangle, and polygon.

To define an image map area:

•	Click on the toolbar button for the desired shape.

•	Move the mouse pointer over the image; the pointer will turn into a crosshair.

•	Click and drag the pointer to create the map area.

•	When you have defined the area, release the mouse button.

The Enter URL information dialog box appears. The following fields are available:

•	URL: the location of the document the area will link to.

•	Comments: a comment in the MAP element or map file to describe the link.

•	Alternate Text: alternate text describing the map areas, for text-only browsers and accessibility.

•	Target Frame: targets a particular frame  of a FRAMESET to load the linked document.

•	When you have entered the information in the dialog box, click on OK.

If this is the first region that you've defined for this image, the Image Map Options dialog appears.

The Image Map Options dialog specifies whether to save the image map information as a server-side image map (ISMAP), a client-side image map (USEMAP), or both.

Client-side

To create a client-side image map:

•	Turn on the UseMap check box in the Save Image Map dialog box; the UseMap name text box will now accept text.

•	You can give the image map a name in the UseMap name text box, or accept the default.

•	Click on OK.

For more information on client-side image maps, see  Background: Client-side image maps .

Server-side

To create a server-side image map:

•	Turn on the Server-side Image Map check box in the Image Map Options dialog box; the adjacent text box will now accept text.

•	Type a file name and path for the mapping file or click on Browse... to choose an existing mapping file.

For more information on server-side image maps, see  Background: Server-side image maps .


Changing an image map

To move an existing image map region:

•	Click on the region and drag it to the desired new location in the image.

To edit the URL information for a region (that is, display the Enter URL Information  dialog box again):

•	Double-click on the region.

To display the Image Map Options dialog box for an existing image map:

•	Right-click on the image and choose Image Properties... from the pop-up menu.

•	In the Image Properties dialog box, click on the Edit Image Map Name... button.

To display all of the defined regions in an image map:

•	Click on the [image] toolbar button.


Background: Client-side image maps

Client-side image maps are generally faster than server-side image maps because the browser does the work, not the server. All of the links for a client-side image map are specified in a MAP element, which is usually in the same HTML document as the image.

The MAP element contains one or more AREA elements, each of which defines a region in the image map. An AREA has the same function as a line in an image map file. AREA doesn't have any content: all of the information is contained in its attributes.

MAP has an attribute called NAME: the value of this attribute is the map name, a string of characters that is used to identify the MAP. The USEMAP attribute of the corresponding IMG element has the same value as the map name (with '#' prepended). This is how the browser knows which MAP to associate with a particular image.

If you create a client-side image map with HoTMetaL PRO, the program creates the MAP and AREA elements and map name for you, and sets the USEMAP attribute to point to the MAP element.

For example, if you defined areas on an image, specified the target links, and chose the default name map1, HoTMetaL PRO creates a MAP element with the NAME map1 and sets the USEMAP attribute of the image to #map1.

For convenience, HoTMetaL PRO places the MAP element directly after the corresponding IMG element. The MAP is not displayed in the browser window.

Associating images with external MAP elements

It is possible to create and reference MAP elements in other documents. To do this you have to edit the USEMAP attribute of the image to point to the document containing the MAP element. For example, if you use the same image map in a number of documents, you may want to have the map element in just one of the documents. The USEMAP attribute of the image would consist of the URL followed by a '#' plus the name of the map. For example:

../public_html/index.html#map


Background: Server-side image maps

When you specify a server-side map, the image is surrounded by a link element (A) that associates the map file with the image. You are generally going to be creating a map file on your PC, and you will have to upload the file to your service provider so that it works on the Web. The following instructions apply to setting the URL (location) of the anchor which surrounds the image so that it points to the map file on the server.

In order to understand what's going on here you have to know that there is a program called imagemap on the server, which reads your image map file whenever someone clicks on the image. The browser sends the program the co-ordinates of the point that was clicked on. The imagemap program determines which region in the image was clicked on, and on the basis of this, tells the server which URL to access.

You use a URL to associate the image map file with your image. This URL tells the server two things:

•	The location (server address and folder) of the imagemap program.

•	The symbolic name for your image map file.

A typical location for the imagemap program is the cgi-bin folder on the server. In this case, the URL (in an  A element) would look something like this:

http://www.my-isp.com/cgi-bin/imagemap/triptych

(Here 'triptych' may look like a filename, but it's actually the symbolic name of the image map file).

You will have to edit the URL of the anchor that has been created, so that it points to the correct position on the server.

•	Change the URL of the A element surrounding the image to a value such as the one in the example above.

The image that you applied the mapping to will have its ISMAP attribute set. This tells the server that this element points to a server-side imagemap.

Server-side image maps: informing the server

Not all Web servers deal with image maps in exactly the same way. For this reason, the instructions given here may not work for your server. The following discussion is based on the Unix NCSA httpd server. You should consult your server's documentation if you're unsure whether something applies.

Once you've created the image map file, you need to tell the server where it is. If you're using the Unix NCSA httpd server, you would do this by making an entry in the file imagemap.conf in the conf folder on the server. (You'll have to find out from a local administrator where the server folder is located.) If you're using a different server, the filenames given in this section may not be correct: you should consult the server documentation or talk to an administrator.

The imagemap.conf file consists of entries that associate a  symbolic name with every image map file known to your server. One line describes each map. You can choose whatever symbolic name you wish to use. In this example, the symbolic name is triptych, and the image map file is in /home/iain/public_html/heads.map. You should put the following line in the imagemap.conf file:

triptych: /home/iain/public_html/heads.map

If someone else is administering the server, you may not be able to update this file yourself. You'll still have to choose a symbolic name for your image map file, because this name is used in the next step.


Image tips and tricks

You can try lots of different things to make your pages work better and look better. Some of the following are supported only by specific browsers, so you should make sure they look acceptable in other browsers before you include them in public pages. The following are just a few tricks:

•	Resizing logos to speed download time – If you have the same logo in different sizes throughout your site, try using the same source image for all of the tags, and set the HEIGHT and WIDTH properties to do the resizing for you. This works better with some images than others, so you should check to make sure it works. This means that users will only have to download a single image (which will be stored in their browser's cache) and let the browser do the work.

•	Removing borders for 'hot' images – If you have created a 'hot' image (an image that is also a hyperlink), your image may be displayed with a link-color border around it in a Web browser. This is because if you don't specify a border for your images, the browser assumes that a border is implied and will display it for linked images. To remove the border, set the BORDER attribute to 0 (zero) using the Attribute Inspector.

•	Using the  VSPACE and  HSPACE attributes for layout – The ability of some browsers to create absolute pixel spacing surrounding an image can give you greater control over how your pages appear. Experiment with different values for the VSPACE and HSPACE attributes to create 'whitespace' around your images.

•	Using percentage values for height and width properties – Some browsers (for example, Netscape Navigator) accept percentage values for the HEIGHT and WIDTH properties. The percentage value represents a percentage of the window size. This can be useful for graphical horizontal rules that resize with the window; for example, you could use a Height of 3 (pixels) and a Width of 100%.


Scrolling 'marquees'

A scrolling marquee is a piece of text that scrolls across a rectangular area that you define in the browser window. You specify the height and width of the marquee area, and then (if desired) specify margins. The scrolling text will be visible between the margins. Surrounding text can be aligned with the marquee area as you wish.

Note: Marquees are not supported by all Web browsers. Use this feature with caution, and make sure that all marquee documents contain markup readable by all browsers.

To create a marquee:

•	 Insert a MARQUEEelement (using  Element... in the Insert menu).

•	Between the tag icons, enter the text that you want scrolled.

The attributes of MARQUEE tell the browser exactly how the text will be displayed and scrolled. You can edit these attributes the Attribute Inspector in the View menu.

•	ALIGNMENT – how the surrounding text is aligned with the marquee text (TOP, MIDDLE, or BOTTOM).

•	BEHAVIOR – specifies the type of movement of the text. The choices are:

•	SCROLL – continuous scrolling on and off the screen (the default)

•	SLIDE – the text scrolls until one end reaches the margin

•	ALTERNATE – the text 'bounces' back and forth between the margins

•	BGCOLOR – background color of the marquee area.

•	DIRECTION – direction (LEFT or RIGHT) that the text scrolls. LEFT is the default.

•	HEIGHT – height of the marquee area, in pixels (n), or as a percentage of the window height (n%).

•	HSPACE – width of the left and right margins, in pixels.

•	LOOP – the number of times the text will scroll. If this attribute has the value '-1' or INFINITE, the text will scroll 'infinitely'.

•	SCROLLAMOUNT – the number of pixels between successive scrolls of the text.

•	SCROLLDELAY – the time in thousandths of a second between successive scrolls of the text.

•	VSPACE – the height of the top and bottom margins, in pixels.

•	WIDTH – width of the marquee area, in pixels (n), or as a percentage of the window width (n%).


Working with tables

What you'll learn in this chapter

Tables in HTML documents are used to present information that is naturally tabular, and to perform page layout.

All of HoTMetaL PRO's commands for inserting and modifying tables are in the Table menu. These commands can also be accessed from the Table toolbar. You can edit some table properties by right-clicking on a table and choosing commands from the pop-up menu.

You can add  and delete  rows and columns from an existing table, move  rows and columns, resize  rows and columns, merge  and split  cells, and set various table properties.  HoTMetaL PRO provides keyboard commands for moving around  in a table. Tabular material in other applications can be pasted or dragged  into a HoTMetaL PRO document.

  More on this topic


Inserting a table

To insert a table:

•	Put the insertion point where you want to insert the table.

•	Click on the [image] toolbar button, or choose Insert Table... from the Table menu.

In the Insert Table dialog box, you can insert the table and set some of its properties.

Each cell in a newly-created table will contain an nbsp character. This is a 'non-breaking space' character and ensures that the cell will be displayed in a browser even if it has no content. You can delete these characters if you wish. If you select a table cell that contains only an nbsp, the icon will will become selected, and therefore it will be deleted as soon as you start typing in the cell. In HoTMetaL PRO you can see these characters only in Tags On and HTML Source view.

Note:  If you want to prevent 'nbsp' characters from being inserted in new tables, set the value of 'insert_NBSP_into_new_cell_if_empty' in the hmpro6.ini file to 'false'.

•	Enter the number of rows and columns that the table should have initially. You can add and delete rows and columns later.

•	If desired, set the table properties. You can also set them later.


Table selections

You can select any contiguous block of cells in a table: a single cell, a row or column, several adjacent cells in a row or column, or a block spanning two or more rows or columns.

The following formatting properties can be applied to the selected cells:

•	Font

•	Bold, italic, underline, and teletype font styles

•	Text color

•	Text size

•	Alignment

You can set table properties for the selection by choosing Table Properties... from the Tables menu or from the right-click pop-up menu.


Setting table properties

You can set table properties (that is, those that apply to the whole table) from the Insert Table dialog box when you insert a table, or you can edit the properties of an existing table or selection of table cells.

To edit the properties of an existing table:

•	Put the insertion point anywhere inside the table, or drag across a range of cells to select them.

•	Do one of the following:

•	Right-click and choose Table Properties... from the pop-up menu.

•	Click on the [image] toolbar button.

•	Choose Table Properties... from the Table menu.

•	Now click on the Table tab in the Table Properties dialog that appears.

You can also set the properties of individual rows, columns, and cells  by clicking on the Row, Column, or Cell tabs, respectively.

 You can set the following table properties:

•	Default Background Color – The table's background color. Click on ... to bring up the Choose Color dialog. The color you select will be expressed as a hexadecimal red-green-blue value. You can also enter this hexadecimal value directly in the text box. You can enter a color name (red, green, etc.) in the text box, but remember that not all browsers support colors expressed in this way.

•	Width – You can specify the table width as an absolute number of Pixels or as a Percent of the document width.

•	Border – The lines that form the boundary of each table cell when the file is displayed in a browser.

•	Turn on Grid, and enter a Width of 1 or greater if you want to have a visible border.

•	Turn on Grid, and enter a Width of 0 if you want the lines in the border to have zero width.

•	Choose None if you want the border to be transparent.

Most browsers do not draw borders around empty table cells. A useful way of giving an empty cell 'invisible' content, thereby forcing the browser to display the border, is to insert a 'non-breaking space' into the cell, by pressing Ctrl+Shift+Space. A non-breaking space is displayed as an ordinary space in WYSIWYG view, and as an nbsp icon in Tags On view. HoTMetaL PRO inserts non-breaking spaces in the cells of new tables. If you select a table cell that contains only an nbsp, the icon will will become selected, and therefore it will be deleted as soon as you start typing in the cell.

If any tables have an 'invisible' border (that is, no border or a zero-width border) you can show or hide the dotted lines representing the border in the HoTMetaL PRO document window by choosing Show/Hide Table Grid from the View menu, or pressing Ctrl+Shift+Q. This option will be applied to all tables in the document. This does not affect how the table is displayed in browsers.

Some browsers support the FRAME and RULES attributes (see below) for more specific border drawing.

•	Cell Spacing – This is the space (in pixels) between cells. If you want cells to touch (that is, there will be no space between cells), set both the cell spacing and the border to '0' (zero).

•	Cell Padding – This is the space (in pixels) between the text of the cell and the cell border.

 There are several other table properties that can be set by editing the attributes of the table.

  More on this topic


Setting table properties by editing attributes

 All table properties can be set by editing attributes. The most common properties can also be set by choosing Table Properties.... This section describes table properties that can be set only by editing the attributes of the table.

To edit attributes, do one of the following:

•	Place the insertion point to the right of the [TABLE> start-tag in Tags On mode and choose Attribute Inspector from the View menu.

Or:

•	Place the insertion point anywhere in the table and choose Attribute Inspector from the View menu.

•	Choose TABLE from the Element list at the top of the Attribute Inspector dialog box.

Not all attributes will be recognized by all browsers. The attributes that you can change are:

•	NOWRAP – Text will not wrap in table cells if this feature is turned on. This can create some very large table cells that scroll off the Web browser's window, so use this feature with caution.

•	BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK – Set the color of the border, or, for 3D (shadow-style) borders, set two different colors for the 'light' and 'dark' areas of the border.

•	VALIGN – Sets the vertical alignment of all cells in the table to top, middle, or bottom. You can also set the vertical alignment of data within individual rows, columns, and cells.

•	HEIGHT – Sets the height of the table in pixels or in percentage of the document height.

•	ALIGN – Tables can have alignment values of RIGHT, LEFT, CENTER, JUSTIFY (right and left alignment), BLEEDLEFT, and BLEEDRIGHT. These values determine how the entire table (not data within cells) is aligned in the document window. You can also set the alignment of data within individual rows, columns, and cells.

•	COLS – Specifies the number of columns in the table. This allows the browser to begin rendering the table before the whole table has been read.

•	FRAME – Specifies which part(s) of the table border will be drawn by the browser. The possible values are:

•	VOID: no border

•	ABOVE: top border only

•	BELOW: bottom border only

•	HSIDES: top and bottom only

•	VSIDES: right and left sides only

•	LHS: left side only

•	RHS: right side only

•	BOX: all four sides
Only one value for FRAME can be specified.

•	HSPACE – Extra horizontal space around the table (in pixels).

•	RULES – Specifies where rules (separators) will be drawn by the browser. The possible values are:

•	ALL: draw all separators

•	COLS: draw column (vertical) separators only

•	NONE: no separators

•	ROWS: draw row (horizontal) separator only
 Only one value for RULES can be specified.

•	VSPACE – Extra vertical space around the table (in pixels).


Setting table row properties

To specify the properties for a single table row:

•	Put the insertion point inside the row whose properties you want to modify.

•	Do one of the following:

•	Right-click and choose Table Properties... from the pop-up menu.

•	Choose Table Properties... from the Table menu.

•	Click on the [image] toolbar button.

•	Click on the Row tab in the Table Properties... dialog that appears.

You can set the following properties:

•	Color –The background color of the row. Click on ... to bring up the Choose Color dialog box. The color you select will be expressed as a hexadecimal red-green-blue value. You can also enter this hexadecimal value directly in the text box. You can enter a color name (red, green, etc.) in the text box, but remember that not all browsers support colors expressed in this way. Most browsers do not display the background color of empty table cells. A useful way of inserting 'invisible' content in an empty cell, thereby forcing the browser to display the background, is to insert a 'non-breaking space', by pressing Ctrl+Shift+Space.

•	Vertical Alignment – Where the cell contents are positioned vertically. Top, Middle, and Bottom are standard choices; if you choose Other you can enter an arbitrary vertical alignment value (this is to allow for enhancements to alignment support in various browsers; make sure that any value you enter is supported by the appropriate browser).

•	Horizontal Alignment – Where the cell contents are positioned horizontally. Left, Center, and Right are standard choices; if you choose Other you can enter an arbitrary horizontal alignment value (this is to allow for enhancements to alignment support in various browsers; make sure that any value you enter is supported by the appropriate browser).

•	Height – You can specifycell height as an absolute number of pixels. Setting the height in the Row tab automatically sets the heights of all cells in the current row. If you set the heights of individual cells, the browser will display the row using the height of the highest cell.

•	Cell Type – You can specify that all cells in the row will be of the type Data Cell (the normal type of table cell) or Header Cell (the contents will be centered and displayed in bold). Header cells will most frequently be used in the top row and the left-most column.


Setting table column properties

To specify the properties for a single table column:

•	Put the insertion point inside the column whose properties you want to modify.

•	Do one of the following:

•	Right-click and choose Table Properties... from the pop-up menu.

•	Choose Table Properties... from the Table menu.

•	Click on the [image] toolbar button.

•	Click on the Column tab in the Table Properties... dialog that appears.

You can set the following properties:

•	Color –The background color of the column. Click on ... to bring up the Choose Color dialog box. The color you select will be expressed as a hexadecimal red-green-blue value. You can also enter this hexadecimal value directly in the text box. You can enter a color name (red, green, etc.) in the text box, but remember that not all browsers support colors expressed in this way. Most browsers do not display the background color of empty table cells. A useful way of inserting 'invisible' content in an empty cell, thereby forcing the browser to display the background, is to insert a 'non-breaking space', by pressing Ctrl+Shift+Space.

•	Vertical Alignment – Where the cell contents are positioned vertically. Top, Middle, and Bottom are standard choices; if you choose Other you can enter an arbitrary vertical alignment value (this is to allow for enhancements to alignment support in various browsers; make sure that any value you enter is supported by the appropriate browser).

•	Horizontal Alignment – Where the cell contents are positioned horizontally. Left, Center, and Right are standard choices; if you choose Other you can enter an arbitrary horizontal alignment value (this is to allow for enhancements to alignment support in various browsers; make sure that any value you enter is supported by the appropriate browser).

•	Width – You can specify cell width as an absolute number of Pixels or as a Percent of the document width. Setting the cell width in the Column tab automatically sets the widths of all cells in the current column. If you set the widths of individual cells, the browser will display the column using the width of the widest cell.

•	Cell Type – You can specify that all cells in the column will be of the type Data Cell (the normal type of table cell) or Header Cell (the contents will be centered and displayed in bold). Header cells will most frequently be used in the top row and the left-most column.


Setting table cell and selection properties

To specify the properties for a single table cell:

•	Put the insertion point inside the cell whose properties you want to modify.

•	Do one of the following:

•	Right-click and choose Table Properties... from the pop-up menu.

•	Choose Table Properties... from the Table menu.

•	Click on the [image] toolbar button.

•	Click on the Cell tab in the Table Properties... dialog that appears.

Note: If you choose Table Properties... when the table selection consists of two or more cells, but not a complete row or column, the dialog will contain a 'Selection' tab that is identical to the 'Cell' tab described here.

You can set the following properties:

•	Color –The background color of the cell. Click on ... to bring up the Choose Color dialog box. The color you select will be expressed as a hexadecimal red-green-blue value. You can also enter this hexadecimal value directly in the text box. You can enter a color name (red, green, etc.) in the text box, but remember that not all browsers support colors expressed in this way. Most browsers do not display the background color of empty table cells. A useful way of inserting 'invisible' content in an empty cell, thereby forcing the browser to display the background, is to insert a 'non-breaking space', by pressing Ctrl+Shift+Space.

•	Vertical Alignment – Where the cell contents are positioned vertically. Top, Middle, and Bottom are standard choices; if you choose Other you can enter an arbitrary vertical alignment value (this is to allow for enhancements to alignment support in various browsers; make sure that any value you enter is supported by the appropriate browser).

•	Horizontal Alignment – Where the cell contents are positioned horizontally. Left, Center, and Right are standard choices; if you choose Other you can enter an arbitrary horizontal alignment value (this is to allow for enhancements to alignment support in various browsers; make sure that any value you enter is supported by the appropriate browser).

Note: You can also set vertical alignment for table cells using the Formatting toolbar buttons for left, center, and right alignment.

•	Width – You can specify cell width as an absolute number of Pixels or as a Percent of the document width. If you set the widths of individual cells, the browser will display the column using the width of the widest cell.

•	Height – You can specifycell height as an absolute number of pixels. If you set the heights of individual cells, the browser will display the row using the height of the highest cell.

•	Cell Type – You can specify that the current cell will be a Data Cell (the normal type of table cell) or a Header Cell (the contents will be centered and displayed in bold). Header cells will most frequently be used in the top row and the left-most column. You can also change the cell type for the current cell by right-clicking in the cell and choosing Change to Header cell or Change to Data cell from the pop-up menu.


Adding table rows and columns

You can add rows and columns to an existing table.

To add one or more  rows or columns, from the Table menu:

•	Put the insertion point in a row or column next to where you want to insert the new rows or columns.

•	Choose Insert Rows or Columns... from the Table menu.

•	Turn on one of Insert Row Above, Insert Row Below, Insert Column Left, and Insert Column Right.

•	Enter the Number of Rows or Number of Columns.

•	Click on OK or Apply.

To add one row or column, from the toolbar:

•	Put the insertion point in a row or column next to where you want to insert the new row or column.

•	Click on the appropriate toolbar button:

•	 – Add a new row above the current row.

•	 – Add a new row below the current row.

•	 – Add a new column to the right of the current column.

•	 – Add a new column to the left of the current column.

You can add a row to the bottom of a table by pressing Tab in the last cell of the last row in the table.


Deleting rows and columns

You can delete one row or column at a time from a table.

To delete a row from a table:

•	Put the insertion point anywhere in the row that you want to delete.

•	Click on the [image] (Delete Row) toolbar button, or choose Delete Row from the Table menu.

To delete a column from a table:

•	Put the insertion point anywhere in the column that you want to delete.

•	Click on the [image] (Delete Column) toolbar button, or choose Delete Column from the Table menu.


Moving rows and columns

You can move a table row up or down by one row, and move a table column left or right by one column.

To move a table row:

•	Put the insertion point anywhere in the row that you want to move.

•	Choose Move Row or Column... from the Table menu.

•	In the dialog box that appears, turn on Move Row Up or Move Row Down.

•	Click on OK or Apply.

Or:

•	Put the insertion point anywhere in the row that you want to move.

•	Click on the [image] (Move Row Down) or [image] (Move Row Up) toolbar button.

To move a table column:

•	Choose Move Row or Column... from the Table menu.

•	In the dialog box that appears, turn on Move Column Left or Move Column Right.

•	Click on OK or Apply.

Or:

•	Put the insertion point anywhere in the column that you want to move.

•	Click on the [image] (Move Column Left) or [image] (Move Column Right) toolbar button.


Splitting cells

Splitting a cell means dividing one cell into two, either vertically (splitting into columns) or horizontally (splitting into rows).

To split a cell into two columns:

•	Put the insertion point anywhere in the cell that you want to split.

•	Click on the [image] toolbar button or choose Split Cell into Columns from the Table menu.

If the original cell had any content, it will be located in the left column after the split.

To split a cell into two rows:

•	Put the insertion point anywhere in the cell that you want to split.

•	Click on the [image] toolbar button or choose Split Cell into Rows from the Table menu.

If the original cell had any content, it will be located in the upper row after the split.


Merging cells

Merging cells means combining two adjacent cells into one cell.

To merge cells from the Table menu:

•	Put the insertion point anywhere in one of the cells that you want to merge.

•	Choose Merge Cell... from the Table menu.

•	In the dialog box that appears, turn on one of :

•	Merge Cell Up – Merge with the cell above this one.

•	Merge Cell Down – Merge with the cell below this one.

•	Merge Cell Left – Merge with the cell to the left of this one.

•	Merge Cell Right – Merge with the cell to the right of this one.

•	Click on OK or Apply.

To merge cells from the Tables toolbar:

•	Put the insertion point anywhere in one of the cells that you want to merge.

•	Click on one of:

•	 – Merge with the cell to the right of this one.

•	 – Merge with the cell to the left of this one.

•	 – Merge with the cell above this one.

•	 – Merge with the cell below this one.

The merge succeeds even if the current cell spans over two or more rows or columns. The reverse is not true, however: if the cell that the current cell is being merged with extends over more rows or columns (or a different set of rows or columns) than the current cell, the merge will not succeed, and HoTMetaL PRO will display an error message.


Contracting cells

Contracting a cell in a table pulls the boundary of a cell one cell to the left, right, top, or bottom. To contract a cell in a table:

•	Right-click on the background of the toolbar area at the top of the HoTMetaL PRO document window and choose Table Advanced from the pop-up menu to turn on the Table Advanced toolbar.

•	Put the insertion point anywhere in the cell that you want to contract.

•	Click on one of the Table Advanced buttons:

•	 – Pulls the left boundary of the cell one cell to the right

•	 – Pulls the right boundary of the cell one cell to the left

•	 – Pulls the bottom boundary of the cell one cell up

•	 – Pulls the top boundary of the cell one cell down


Inserting a table caption

A table caption is a title for the table.

 To insert a table caption:

•	Put the insertion point anywhere inside the table.

•	Choose Insert Caption from the Table menu.

•	Enter the caption text.

If the current table contains a caption, the menu item will toggle to Select Caption. Choosing Select Caption will highlight the caption text; if the caption is empty, the insertion point will move to the caption location.

By default, browsers will display the caption above the table. Some browsers will display the caption below the table if you set the CAPTION element's ALIGN attribute to BOTTOM:

•	Put the insertion point inside the caption.

•	Choose Attribute Inspector from the View menu, or press F6.

•	Choose BOTTOM in the ALIGN field.

•	Press Enter.


Moving around in a table

There are several ways to move around the insertion point in a table:

•	Clicking to the right of a table moves the insertion point outside of the table. This is particularly useful in WYSIWYG view when the table is at the bottom of the document.

•	You can move up, down, left, and right using the arrow (cursor) keys.

•	To move to the next cell on the right, press Tab. If you press Tab in the last cell in a row, the insertion point will move down to the first cell in next row. (If you press Tab in the last cell in the table, a new row is inserted at the end of the table.)

•	To move to the next cell on the left, press Shift+Tab. If you press Shift+Tab in the first cell in a row, the insertion point will move up to the last cell in the previous row.

•	To move to the last cell in the current row, press Alt+End.

•	To move to the first cell in the current row, press Alt+Home.

•	To move to the last cell in the current column, press Alt+PageDown.

•	To move to the first cell in the current column, press Alt+PageUp.

If a cell spans across two or more columns, the cell is considered to be contained in the leftmost of those columns for purposes of navigation. If a cell spans across two or more rows, the cell is considered to be in the topmost of those columns for purposes of navigation.


Resizing rows and columns

Row heights can be an absolute number of pixels; column widths can be an absolute number, or a percentage of the document width. Different browsers may handle table dimensions in different ways and may redraw tables differently when a reader changes the dimensions of the browser window.

You can resize rows and columns from the Table Properties dialog or by dragging the row and column boundaries in the document window.

To change the height of a row:

•	Move the mouse cursor over the bottom horizontal boundary of the row until the cursor turns into a double-headed arrow.

•	Drag the boundary up or down to resize the row height.

Or:

•	Right-click anywhere in the row you would like to resize and choose Table Properties... from the pop-up menu.

•	Click on the Row tab.

•	Type the height, in pixels, in the Height text box.

•	Click on OK.

To change the width of a column:

•	Move the mouse cursor over either of the vertical boundaries of the column until the cursor turns into a double-headed arrow.

•	Drag the boundary left or right to resize the column width.

Or:

•	Right-click anywhere in the column you would like to resize and choose Table Properties... from the pop-up menu.

•	Click on the Column tab.

•	Turn on Pixels or Percent depending on which way you want to specify the width. A percent value means a percent of the total width of the table.

•	Type the width (pixels or percent) in the Width text box.

•	Click on OK.

Note: HoTMetaL PRO automatically calculates the column width based on content.


Pasting tables from other applications

You can copy and paste tabular material from other applications, such as spreadsheets and text editors, into HoTMetaL PRO. This material will be converted to a table. Non-tabular material will be converted into a list  or a paragraph.

Converting to a table

HoTMetaL PRO will convert a pasted selection into a table if:

•	There are at least two lines.

•	Each line consists of items separated by tabs.

•	Each line has at least two items.

•	Each line has the same number of items. This does not mean that every cell in every line has to have content; to represent an empty cell, enter a tab to indicate that the cell is there, even though it is empty.

Selections from spreadsheets such as Excel are normally represented in the format described, so there is no problem with pasting them. Tabular material from text editors such as Notepad can also be pasted, and will be automatically converted into a table as long as it conforms to the above guidelines.


Using tables for page layout

Tables have two common uses in HTML documents:

•	To present information that is naturally tabular, such as a table of products and prices, or a table of cities and their populations.

•	To perform page layout.

The page layout role is not always an easy fit for tables, which, as a category of HTML elements, are fairly complex. In addition to the basic complexity of the problem, there are important variations in the way different browsers handle tables. If you are relying on tables to produce a particular 'look' for a page, be sure to view it in each major browser.

The basic idea behind using tables for layout purposes is that you can use a table row, column, or cell to define a region of the screen, and then insert some content in that region. One common use for tables is displaying information in multiple columns—each table column represents a column on the page.

Some techniques that are useful to know about when using tables to achieve various visual effects are:

•	You can set the background color of cells, rows, columns, or the whole table.

•	You can hide the table border, or make it wider or narrower.

•	You can move cells closer together or farther apart by setting the cell spacing value.

•	You can move the text closer to or farther from the cell boundary by setting the cell padding value.

•	Most browsers will not display the border or background of a cell that has no content. A useful way of giving an empty cell 'invisible' content is inserting a 'non-breaking space' into the cell, by pressing Ctrl+Shift+Space.

•	Some similar effects can be achieved using frames.

Example

 Here is a simple example: suppose you want to display several paragraphs, with a thick vertical yellow line to the left of the paragraphs. This can be laid out using a table, as follows:

•	Create a table with one row and two columns.

•	Make the table border invisible.

•	Set the background color of the column (cell) on the left to yellow.

•	Set the width of the cell on the left to the desired number of pixels.

•	Insert a 'non-breaking space' into the cell on the left by pressing Ctrl+Shift+Space.

•	Insert the paragraphs in the column (cell) on the right.

The cell on the left width the yellow background is displayed in the browser as a yellow line that extends from the top to the bottom of the text on the right.


Editing HTML markup

What's covered in this chapter

This chapter introduces the rules of HTML and describes how HoTMetaL PRO deals with them. Topics include:

•	The basic structure of an HTML document

•	Inserting HTML elements.

•	Changing, splitting, joining, and removing elements .

•	Using attributes.

•	Making sure your HTML is valid .

•	Fixing markup problems with the HTML wizard.

•	Finding and replacing elements and text.

•	Making your pages accessible to everyone .

•	Inserting special characters.

•	Editing HTML in source view .

If you use HoTMetaL PRO in WYSIWYG view, most of the time you don't need to concern yourself with completely understanding HTML. But the more you work with your Web pages, the more likely you are to want to add something that requires some knowledge of HTML. Or maybe you just want to know what all the fuss is about. Once you understand the basics, you'll see that it really is elementary!

  More on this topic


Selecting text and elements

In HoTMetaL PRO, it is easy to select and move around parts of the document structure in the document window without having to worry about making the markup invalid. Each time you select a start- or end-tag, the corresponding tag (and all the content in between) is automatically selected, too. This ensures that you never cut or move just part of the markup. There are also a number of ways to quickly select a whole element (and any sub-elements).

When editing HTML markup, it is helpful to see the tags that are in your document so that you can more easily select and edit elements. To view the document in Tags On view:

•	Choose Tags On from the View menu, if it isn't selected already, or click on the [image] button in the Views toolbar.

To select an element, do one of the following:

•	Put the insertion point inside the element and choose Select Element from the Edit menu, or type Ctrl+Shift+T.

•	Right-click anywhere in the element and choose Select Element from the pop-up menu.

•	In Tags On view, click once on either the start- or end-tag.

The element is selected.

To select several consecutive elements:

•	Place the insertion point anywhere in the first or last element that you want to select, and drag in the appropriate direction until all of the elements are selected.

The Cut, Copy, and Paste commands are similar to those in other Windows applications. The only difference is that in HoTMetaL PRO, a selection can contain elements. Removing or pasting certain elements can cause invalid markup in some circumstances.

HoTMetaL PRO will not paste a selection that would cause the markup to become invalid. Cut and Delete will become disabled if you select required elements, such as HTML, HEAD, and BODY.

To select all the content in the body of a document:

•	With the insertion point anywhere in the document, type Ctrl+A. The entire content of the document is selected.


Well-formed markup

HoTMetaL PRO always creates markup (tags and attributes) that is well-formed. This means that when HoTMetaL PRO saves a file:

1	All tags (except for so-called empty tags) will have both a start-tag and an end-tag.

2	All attribute values will be surrounded by double quotes.


Empty tags

Some HTML tags are known as empty tags. Empty tags cannot have any content between the tags. In fact, in raw HTML (as displayed in the HTML Source view), empty tags consist only of a start-tag. The only 'content' that empty tags can have is their attribute values. In Tags On view, an empty tag looks like this: [TAGNAME> < ]. Some examples of empty tags are [BR> < ], [HR> < ], [LINK> < ], and [IMG> < ].


Creating HTML: it's elementary

To see the HTML markup in a document in Tags On view:

•	Open a document, or click on the [image] button to create a new document.

•	Choose Tags On in the View menu or click on the [image] button from the Views toolbar.

The document is surrounded by an element called HTML. This element contains two sub-elements, HEAD and BODY. These are required elements. The HEAD element contains information about the document; the BODY element contains all the other elements that make up the document itself.


Inserting HTML elements

You can think of the elements in an HTML file in (at least) two different ways: you can think of them as formatting styles, or as structural elements. Since a document published on the Web will be formatted differently by each browser or another application that reads it, you may prefer to think of the elements as standing for parts of the document's structure—heading, paragraph, list item—without thinking explicitly about how they are formatted. On the other hand, if you are accustomed to working with desktop publishing or word processing applications, you may want to think of the elements as styles.

HoTMetaL PRO supports both approaches to HTML markup. Working in the WYSIWYG view is similar to applying word processing styles; the Tags On view is oriented toward thinking of elements as structural objects.

In earlier topics, you learned how to use the toolbar and the Enter key to insert elements. When you did this, you were creating HTML elements that serve various functions in the document.

In this chapter, you'll learn how to use the Element List to insert specific elements.

There are several ways to insert an element:

•	Choose Element... from the Insert menu.

•	Press Ctrl+Shift+I.

•	Click on the [image]  toolbar button.

The Element List window appears.

Once you are comfortable enough with HoTMetaL PRO to attempt some of the more complex HTML features, you'll discover that there are some HTML elements that are available only using this method.There are three tabs for HTML elements: Recent, Miva, and HTML. The Recent tab contains the ten most frequently used elements in this editing session that are valid in this context. The Miva tab contains elements in the Miva programming language, supported by the HoTMetaL Personal Server and HoTMetaL Application Server. All of the elements available for editing HTML markup are available in the HTML tab. If you prefer to always have the full list of available elements visible, use the HTML tab. You can press the Tab key to switch between tabs.

For information about Miva, refer to Coding Guidelines for Miva files in the HoTMetaL PRO online help.

•	Click on the HTML tab to display the full list of elements.

•	To select an element, click on it, or type the first few letters of the element's name, until the selection moves to the desired element.

•	To insert an element, double-click on the element that you want to insert, or select the element and click on Apply or press Enter. If the dialog is floating, pressing Ctrl+Shift+Enter will insert the selected element and dismiss the dialog.

If the document contains a selection, the new element will surround it.

If you try this with the insertion point in various places in your document, you will notice that the list of elements changes. HoTMetaL PRO automatically provides you with a list of elements appropriate to your location in the document. For example, if you have text selected, only character format elements appear. If the insertion point is inside a block element, elements that cannot be nested inside that element do not appear, helping you to avoid invalid markup.

For information on changing the appearance of the Element List window, see Docked and floating windows .

In some circumstances, HoTMetaL PRO will automatically insert an element to conform with the HTML rules. If you type inside an element that cannot contain text directly, but normally contains a sub-element that can contain text, the text you type will automatically be surrounded by that sub-element. For example, if you insert a UL, as soon as you start typing an LI element is automatically created, and contains your text.


Types of elements

There are a large number of available HTML elements (some of which are rarely used). It may help you to remember the more commonly used elements if you think of them as being grouped into different types, as they are in this section. Some of the elements described in this section are available from the toolbar and Element Style drop-down list and have been described earlier.

•	Head elements

•	Character formatting elements

•	List elements

•	Block elements

•	  'Code' elements, sometimes used to format text in technical manuals or papers

•	 HTML comments

•	Other character formatting elements

 Other elements—those that represent tables, forms, frames, links, and images—have specialized editing interfaces in HoTMetaL PRO and don't have to be inserted directly in a document.

  More on this topic


Using your HEAD

The HEAD element has sub-elements that define header material:

•	TITLE – contains the document title, which appears in the title bar of a web browser when the file is displayed. This is a required element.

•	BASE – can be used to record the document's location in the form of an absolute URL, which can be used to resolve a relative URL if the document is not accessed in its original location.

•	ISINDEX – indicates to the browser that the document is an index document. This is used only if the document is on a server that does indexing.

•	LINK – indicates a relationship between the document and another object on the Web, such as a cascading style sheet.

•	META – gives information that appears in HTTP headers. This can also be used to store document information such as the author and creation date.


Using block elements

Block elements are those that are commonly displayed starting on a new line. Any of the following block elements can be inserted in the body of a document:

•	Heading elements (H1 through H6) – Give headings to sections of the document.

•	P (paragraph) – Paragraphs are the most common elements.

•	ADDRESS – Used to include an address, such as the address of the author of the document.

•	BLOCKQUOTE – Used for quotes from another source, requiring special block-style formatting.

•	PRE (pre-formatted text) – Used to tell a browser to maintain the line breaks and spacing exactly as they were entered. The text will be formatted by a fixed-width, typewriter-style font.

You can insert a block element using Element... from the Insert menu to be able to add headings and paragraphs quickly.

Turn on the Quick Tools toolbar (using the Toolbars... command in the View menu) to be able to add new headings and paragraphs quickly.

Type Return to start a new line, then click on the appropriate toolbar button for the element you wish to insert.


Using character elements

Character elements are used to specify special formatting for text, usually to add emphasis. It is considered good practice to use the STRONG and EM elements, rather than B and I. This leaves browsers with the flexibility to display the text in the way that works best with the other display capabilities and settings of the browser. You can add the following elements to inline text:

•	STRONG – Usually displayed by browsers as bold.

•	B – Bold.

•	EM – Emphasis, usually displayed by browsers as italic.

•	I – Italic.

•	U – Underline. Since linked text is usually underlined, this element should only be used where it will not cause confusion.

•	CITE – Document citation.

•	TT – Teletype, displayed in a fixed-width typewriter font, such as Courier.

To insert a character format element:

•	With the appropriate text selected, choose Element... from the Insert menu. The Element List window appears.

•	Click on the HTML tab to choose an element from the list.

•	Select the element you wish to insert from the list, and click on the Apply button. The selected text is now enclosed by that element.

You can use the [image], [image], and [image] toolbar buttons to make text bold, underlined, or italic quickly.


Inserting a line break

If you want to force a browser to break the current line in the text, insert a BR element. This element cannot contain text: it merely represents a line break.

To insert a line break:

•	Put the insertion point at the point at which you want to break the line, and do one of the following:

•	Press Shift+Enter.

•	Choose Element... from the Insert menu. The Element List window appears. Click on the HTML tab. Select BR from the list, and click on Apply.

The text is now split at the insertion point.


Using list elements

There are five HTML elements for different types of lists. With the exception of DL, list elements contain one or more LI (list item) elements. You can nest lists (that is, create sub-lists), by inserting a list element (such as UL or OL) inside a list item (LI).

To insert a list element using the Element List window:

•	With the insertion point in the body of the document (but not inside any other block element), choose Element... from the Insert menu. The Element List window appears. Click on the HTML tab. Select one of the following list elements:

•	OL – ordered list. Browsers will automatically number the items in this list element, reflecting nested levels.

•	UL – unordered list. Items in this list start with a list mark (bullet). Browsers usually use a different list mark for nested lists. You can set an attribute to specify a graphic to be used as the list mark.

•	DL – list of definitions. This type of unordered list is different from the others. Each item in a DL consists of one or more terms (DT elements), followed by definitions (DD elements).

•	DIR – folder list. This is an unordered list. Each LI element in a DIR should be no longer than 24 characters.

•	MENU – menu list. Also an unordered list. Each LI element should be no longer than one line.

You can change text to list items quickly using the Style Element drop-down menu, or use the [image] and [image] toolbar buttons for numbered or bulleted lists.


Inserting comments

You can add comments about the document or notes to yourself using the Comment command in the Insert menu. This inserts an HTML comment, which can contain only text (not other elements). Comments are not displayed by browsers, but can be viewed in HoTMetaL PRO if the Show comments option is turned on.

To insert a comment:

•	Choose Comment from the Insert menu, or type F8.

•	Type your text inside the tag.

To show comments:

•	Choose Options... from the Tools menu. The Options dialog box appears.

•	Click on the View tab.

•	Turn on the Show comments option.

•	Click on OK. Your comments will now display in the document window (but not in browsers).

Note: Because of the way comments are represented in HTML, you should not put two hyphens in a row (--) inside a comment. This could cause invalid markup.


Using code elements

Code elements represent a specific type of text and would normally be used in technical manuals or academic papers. You can insert any of these elements using the Element List window:

•	CODE – Samples of code, usually displayed in a typewriter-style font.

•	KBD – Used to display text that a user would enter at the keyboard (not to confused with INPUT, used in forms), usually displayed in a typewriter-style font.

•	SAMP – Literal characters, usually displayed in a typewriter-style font.

•	VAR – Represents a variable name (for example, filename).


Using advanced text formatting elements

There are a number of other text formatting elements available from the Element List window. Make sure that your pages look acceptable without these elements, because they are not supported by all browsers. Use them with caution to create:

•	Blinking text – Surround text with the BLINK element to cause it to blink on and off in the browser. Remember that such text is inaccessible for some users.

•	Non-breaking text – Surrounding text with the NOBR element prevents the browser from inserting line breaks. This element should be used only with short pieces of text that you wish to keep together (for example, a proper name).

•	Word breaks – If there is a position inside a NOBR element where a line break is acceptable to you, put a WBR element at that position to tell the browser that it can break the line there, if necessary.

•	Large and small text – Surrounding text with the BIG or SMALL element causes the text to be displayed in large or small type, respectively, compared to the surrounding text.

•	Strike-through text – Surrounding text with the S element causes it to be printed with a line through the text.

•	Subscripts and superscripts – Surrounding text with the SUB or SUP element causes the text to be displayed as a subscript or superscript, respectively.

•	Base font – The BASEFONT element is used to increase or decrease the default font size for the whole document. This element must be placed inside the BODY element before any block elements. The possible values of the SIZE attribute are not specific font sizes: they are proportional sizes that range from 1 to 7, with 3 corresponding to the usual font size. The font size will not change in the document window but it will change when the document is displayed by browsers that support BASEFONT.


Changing the markup

Every Web page is a work in progress: modifications are always being made. Whether you are editing text on your page or changing layout, you will need to change the markup.

HoTMetaL PRO supports the following functions for modifying the markup:

•	Changing the element type.

•	Splitting elements.

•	Joining elements.

•	Removing elements.

  More on this topic


Changing elements

Changing an element can be as simple as selecting a new element from the Style Element pull-down menu. For example, you change a level 1 heading to a level 2 heading just by placing the insertion point in the heading and choosing Heading 2 from the pull-down menu of styles in the Formatting toolbar.

For ease-of-use, only the most commonly used elements appear on the pull-down menu. To change an existing P element to a more specialized HTML element such as DIV, use Change Element... from the Edit menu.

To change an element:

•	Place the insertion point inside the element.

•	Choose Change Element... from the Edit menu or, if the Element List window is already visible, click on the Change radio button at the bottom of the Element List window. The Change Element window appears.

•	Click on the HTML tab.

•	Select the desired element.

•	Click on Apply.


Splitting elements

Splitting an element creates two elements of the same type as the current element. If there is content in the element, the first element will contain all the content before the insertion point and the second element will contain the remaining content. If the insertion point is just after the start tag, or just before the end tag, a new, empty element is created. The most common use for splitting elements is to place the insertion point just before the end tag and create a new, empty element after the current element.

To split an element:

•	Place the insertion point where you want to split the element and do one of the following:

•	Press Enter (in a block element).

•	Type Ctrl+Shift+P.

•	Choose Split Element from the Edit menu.


Joining elements

To join two elements, do one of the following:

•	Place the insertion point just after the start-tag for the second element and press Backspace.

•	Put the insertion point anywhere in the second element, and choose Join to Preceding from the Edit menu or press Ctrl+Shift+J.

If the elements have attributes, then the attributes of the first element will be adopted for the new, combined element.


Removing elements

The easiest way to remove an element ( that is, the tags, not the content) is to use the Backspace key in Tags On view, especially if you want to remove one of several nested elements (elements within elements). Some character formatting elements can also be removed by selecting the formatted text and clicking the appropriate button. For example, to remove the italics from a word, select the whole word and click on [image].

To remove the current element, do one of the following:

•	Place the insertion point just after the start-tag for the element, and press Backspace.

•	Put the insertion point anywhere directly in the element (that is, not in a subelement), and choose Remove Tags from the Edit menu or press Ctrl+Shift+D.


Using attributes

Elements can have content (the text and sub-elements you have placed inside the element) and attributes. An attribute is a value, or piece of information about the element that does not show in the content. Any element can have an attribute. For example, the URL part of an image anchor is an attribute, and you can use another attribute to specify the alignment of the image.

In Tags On view, you can choose to have Tag Tips appear when you hover the cursor over a tag in the document window. Tag Tips display any non-null attribute values for the element. Tag tips are visible by default. To turn Tag Tips on or off:

•	Choose Options... from the Tools menu. The Options dialog box appears.

•	Click on the General tab if it isn't selected already.

•	Click on the Show Tag Tips check box.

•	Click on OK.

When you hover over a tag in the document window, the attributes will be displayed in a small floating dialog box.

Note: In WYSIWYG view, Tag Tips display the attributes of images.

You can use the Attribute Inspector to change the attributes of any element (discussed in the next section), but some elements also have special dialog boxes that appear automatically when the element is created.

Some elements with special dialog boxes for editing common attributes are:

•	An image (IMG element) has an Image Properties dialog box. To open this dialog box, double-click on the image or right-click inside the IMG element and choose Image Properties from the pop-up menu.

•	The HREF attribute, which represents URLs in A elements, can be edited by choosing Link... from the Insert menu.

•	Graphical FORM objects have customized attribute editing dialog boxes. Double-click on those objects to access the dialog boxes.

•	Many attributes in tables, and table rows, columns, and cells, can be edited by right-clicking in the table and choosing Table Properties from the pop-up menu.

•	You can change the attributes of the BODY element that set color and background images by choosing Page Properties... from the File menu.

•	You can change the attributes of frames by right-clicking on a frame and choosing Frame Properties... from the pop-up menu, or by choosing Frame Properties from the Frameset menu.

  More on this topic


Editing attributes with the Attribute Inspector

In the WYSIWYG and Tags On views, you can edit attributes for any element using the Attribute Inspector. You may find it easiest to make sure you are in the element whose attributes you want to edit by working in Tags On view and placing the insertion point directly to the right of the element's start-tag. If you prefer to work in WYSIWYG view, you can use the context display at the bottom of the window to confirm which element you are in.

To edit the attributes of an element:

•	Place the insertion point inside the element.

•	Choose Attribute Inspector from the View menu, type F6, or click on the [image] button from the Views toolbar.

The Attribute Inspector window appears.

The drop-down list at the top contains the current element and all of the elements that enclose it. If the element listed is not the element you wanted to edit (for example, if an inline element is listed, but you want to edit the block element that contains it), choose the element from the list and its attributes will appear in the Attribute Inspector.

The Attribute Inspector is divided into three tabs: the All tab contains all of the attributes of the element; the Common tab contains the most common attributes of the element;the Events tab contains all of the attributes of the element that correspond to actions that can be associated with a script (for example, a JavaScript script.).

•	Click on the first attribute you wish to edit. The editing field associated with an attribute can be one of three types. If a drop-down arrow appears at the right edge of the field, you can choose a value from the drop-down list; if there is a ... button, you can click on it to browse for a file; otherwise, type an appropriate value in the field.

•	You can use the arrow keys to scroll up and down through the window and edit other attributes. If you click on a ... button, your selection is applied when you click OK; other values are applied when you press Enter, move to another field, or close the dialog box. This enables you to see the effects of your changes in the document window before closing the Attribute Inspector.

•	Click on the [image] button or press Alt+F4 to dismiss the window.

Drag and drop

You can drag and drop objects into fields in the Attribute Inspector. You can create a link to a file displayed in the Resource Manager by dragging that file onto an appropriate attribute (for example, the HREF attribute of the A element). For example, if you wanted to have a sound played when you click on an image you would drag the sound file from the Resource Manager to the ONCLICK attribute of the image file in the Attribute Inspector.

Editing STYLE attributes

Most elements have a STYLE attribute that lets you attach cascading style properties to the element. Click on the ... in the STYLE field to bring up the Cascading Style Sheet editor.

For more information about using cascading style sheets, see the topic Using cascading style sheets.

In HTML Source view, attributes are displayed in the start-tag for each element. If you know HTML well enough, you can edit attributes directly in the source view .


Creating valid HTML

One of the most important features of HoTMetaL PRO is automatic rules checking, which ensures that you do not break the required structure as you work with your document. As well, when you open or save a document, HoTMetaL PRO validates it—it checks that the markup is correct and complete.

Many HTML browsers permit a very loose, unstructured document format. However, this provides no guarantee that documents will be formatted the way you want when they are displayed on the Web, particularly given the wide range of browsers. You will get much better results with valid documents.

The document-structuring rules built into HoTMetaL PRO are designed to be flexible while at the same time maintaining a useful document structure. If you open an existing document that does not conform to these rules, HoTMetaL PRO will try to open it anyway, adjusting the markup so that it conforms as closely as possible to the rules of HTML. If there are serious errors, the HTML wizard will be launched.

HoTMetaL PRO prevents markup errors in a number of ways:

•	Commands are grayed out (disabled) under circumstances that could cause errors. For example, commands on the Insert menu are gray whenever it would be invalid to insert the related object.

•	A restricted list of elements is presented. For example, the Element List window will list only those elements that can correctly be inserted in the current location.

•	In some cases, HoTMetaL PRO will not complete the command. For example, if you choose an element style from the Style Element drop-down list that cannot be correctly inserted at the current location, the element style will not be inserted.

•	In other cases, you are given an opportunity to cancel a command that would create invalid markup. For example, if a Paste operation would leave the document incorrectly tagged, a warning pops up asking if you want to cancel the operation.

  More on this topic


Checking the HTML

Use the Check HTML command to verify that the markup in a document is correct and complete.

Validation will find and report any markup errors not caught by rules checking. It will check that:

•	All required elements are present. For example, if the document contains an OL (ordered list) element that does not contain at least one LI (list item) element, validation will detect this problem.

•	All required attributes are present. For example, an IMG element must have a value for the attribute SRC (this represents the URL for the image, and is filled in automatically if you choose an image when you create the IMG element). If an IMG element exists without one, validation will detect its absence.

To validate a document:

•	Choose Check HTML from the Tools menu, or click on the [image] toolbar button.

One of the following appears:

•	A message confirming that your document is valid.

•	A Validation Log containing a list of one or more error messages. To go to the location of an error, double-click on the error message, or single-click on the error message and click on Go To.

•	If your document contains elements or attributes that are not defined in HTML 2.0 (a very basic HTML standard), you will get a warning informing you of this. Click on More... if you wish to see the details, in the HTML Extensions Used dialog box.

To determine which elements in your document will be understood in various browsers, choose a browser from the drop-down list. In the top panel, the elements specific to that browser will be listed. The bottom panel lists all the elements that are not understood by other browsers or found in commonly-used rules files (HTML 3.2, HTML 4.0). You can also select a browser or rules file from the drop-down list.

Note: SoftQuad does not make its own DTD publically available, therefore documents that start with the DOCTYPE declaration for this DTD cannot be validated by independent validators. You can create documents that use standard W3C DTDs by choosing New... from the File menu, then choosing File From Template and selecting a template from the W3C tab.


Learning when to turn off the rules

The current rules checking state is indicated in the lower right corner of the status bar. In WYSIWYG and Tags On views, rules checking is automatically on as much as possible. In HTML Source view, rules checking does not apply (HTML is invalid most of the time when you are entering it by hand). When rules checking is on, HoTMetaL PRO ensures that the document being edited will be correctly marked up—changes that would cause invalid markup are not allowed.

There are occasions when the changes you are making involves two or more steps, and one of the steps will leave the document temporarily invalid. In these situations rules checking can get in the way and can be turned off temporarily. You can turn rules checking off in the General tab of the Options dialog box by selecting Rules checking always off. If you do this, you should turn rules checking back on at the earliest opportunity. You can also edit in HTML Source view if you need to temporarily work with invalid HTML.

  More on this topic


Moving text around

You may have noticed that you cannot select text across element tags (that is, you cannot place your insertion point in the middle of a paragraph and select the second half of the paragraph and down into the next—the full paragraph is automatically selected). That is because a single start or end tag would be a markup error. Each time you select a tag, its partner (and all the content in between) is automatically selected, too.

If you are completely rearranging the content of your document, you may prefer to work with rules checking off (that is, either turn the option off or work in HTML Source view) while you cut and paste portions of the content, fix any broken markup, and then turn rules checking back on.


Fixing markup problems with the HTML wizard

HoTMetaL PRO has a built-in set of rules that determine which HTML elements and attributes are valid, and how they can be arranged with respect to one another. If you open an invalid document—one that violates the built-in rules—HoTMetaL PRO will try to silently auto-correct the problem in order to produce a valid document. Generally speaking, if your document contains valid HTML elements and attributes, but has them arranged incorrectly (for example, if an LI is not enclosed in a 'list' element such as OL or UL) HoTMetaL PRO will correct the problem for you.

HoTMetaL PRO checks for certain problems when you try to open a file, or when you switch between HTML Source and Tags On views. If some invalid markup is found, the HTML wizard starts.

The HTML wizard asks you how you would like to solve the problems found. The more knowledgeable about HTML you are, the easier it will be to make these choices, but the HTML wizard itself provides enough guidance for you to use it no matter what your level of expertise is.

This wizard is launched if HoTMetaL PRO finds:

•	An element that it does not recognize.

•	An attribute it does not recognize.

Note: You can undo the actions of the HTML Wizard by editing the file Rules\hmpro6.ux, in the HoTMetaL PRO 6 folder. This file is in XML.

  More on this topic


Fixing unknown elements

A document might contain an unknown element, for example, PARA instead of P. In this situation, HoTMetaL PRO will offer you the choice of letting the program attempt to auto-correct the problem, or launching the HTML wizard.

If you launch the HTML wizard, a dialog box appears with the following choices:

•	HTML Element wizard – This is a wizard that guides you through correcting the invalid element.

•	Edit HTML Source – Opens the document in HTML Source view, where you can correct the problem manually.

•	Discard this tag – The tag (for example '<para>'), but not its contents, will be discarded.

•	Discard all unrecognized elements – All unrecognized tags in the document will be discarded; you will not be asked individually about each tag.


The HTML Element wizard

If you choose to correct an invalid element with the HTML Element wizard, it appears and offers you several choices.

The simplest choices are:

•	Misspelled Element – If the error is simply a typing error (for example, APPELT instead of APPLET) or a case of not knowing the correct HTML element name (for example, EMPH instead of EM) you can choose this option and enter the correction in the text box (some element names are available from the pull-down menu).

•	Text Only – If the error occurred because the '<' character, which normally starts an HTML tag, was used in some other context (for example, the phrase 'Press <Return>') you should choose this option. The '<' will be replaced by the characters '&lt;', which will be displayed as '<' in a browser, but will not start a tag.

If you choose either of these options and click on Finish, the wizard makes the desired change and terminates.

If you want HoTMetaL PRO to treat this element as a valid HTML element from now on, you have two choices:

•	Custom Element (Container) – Choose this option if the new element consists of a start- and end-tag with some content (text and/or other elements) between them (for example, <para>...</para>).

•	Custom Element (Non-container) – Choose this option if the new element consists only of a start-tag, and doesn't contain any text or elements (it can have attributes, however). For example, instead of an IMG element you could have:

<image

src="logo.gif">

Note: You should define the unknown element as a new element only if there is a browser or other HTML client application that supports that element. Otherwise, the element may be formatted as you wish only in HoTMetaL PRO.

If you choose one of these options and click on Next>>, you'll get another screen in which you can further customize the new element.

Configuring custom elements

If you add a new element to the list of valid elements, you will get a screen that lets you specify some properties of the element.

•	Name – You can modify the element name (but if you do so, and you chose Custom Element (Container) in the previous screen, only the start-tag will be modified).

•	Description – This description will appear in the Description field in the Element List window.

You can choose the following style properties:

•	Turn on Paragraph if you want the new element to be displayed as a block-style element (the element will have line breaks before and after it), or Character if you want the element to appear inline.

•	Turn on Preserve white space if you want the line-breaks, tabs, and spaces inside this element to be displayed in HoTMetaL PRO exactly as they appear in the HTML file.

•	Turn on Hide in WYSIWYG mode if you want the contents of this element to be hidden in WYSIWYG view.

Note: You can undo the actions of the HTML Wizard by editing the file Rules\hmpro6.ux, in the HoTMetaL Pro 6 folder. This file is in XML format.


Fixing unknown attributes

A document might contain an unknown attribute, for example, the IMG start-tag might have an HREF attribute instead of SRC. In this situation, HoTMetaL PRO will give you the choice of letting the program attempt to auto-correct the problem, or launching the HTML wizard dialog box. This will also occur if a new element that you defined using the HTML Element wizard has one or more attributes; each of these attributes has to be defined individually for the new element. If you choose Auto-correct in this situation, the attributes will be deleted.

If you choose HTML wizard, you will see a dialog box with the following choices:

•	HTML Attribute wizard – This is a wizard that guides you through correcting the invalid attribute.

•	Edit HTML Source – Opens the document in HTML Source view, in which you can correct the problem manually.

•	Discard this attribute – The attribute and its value (the text between double quotes, if any) will be discarded.

•	Discard all unrecognized attributes – All unrecognized attributes in the document will be discarded; you will not be asked individually about each attribute.


The HTML Attribute wizard

The HTML Attribute wizard lets you correct an unknown attribute or add it to the list of valid attributes.

To correct an attribute name:

•	Choose the correct name from the Attribute Name drop-down list.

•	Click on Finish.

To add the unknown attribute to the list of valid attributes:

•	Leave the Attribute Name unchanged.

•	Optionally, enter some descriptive text in the Help string for Attribute Inspector text box.

•	Optionally, enter a space-separated list of values; this will restrict the allowed values for the new attribute.

•	Click on Finish.

Note: You can undo the actions of the HTML Wizard by editing the file Rules\hmpro6.ux, in the HoTMetaL PRO 6 folder. This file is in XML format.

Note: You should define the unknown attribute as a new attribute only if there is a browser or other HTML client application that supports that attribute. Otherwise, the attribute will be supported only in HoTMetaL PRO.


Authoring for accessibility

HoTMetaL PRO includes the following features to make accessible authoring easier and faster.

•	Accessibility prompting dialog boxes

•	Descriptive text editor

•	Accessibility validation

•	Pop-up warnings

HoTMetaL PRO helps you evaluate the accessibility of your markup by letting you check the markup according to the guidelines that follow. Please see the section on validating for accessibility  for more information.

  More on this topic


Guidelines for creating accessible pages

People access the Internet and intranets under a variety of circumstances. Some users cannot see graphics because they have visual impairments, use text-based browsers, or have slow modem connections; others cannot hear sound because they have auditory impairments, or use computers without sound capabilities; and some cannot operate a mouse or keyboard because they have mobility impairments. Accessible HTML authoring means writing pages and sites that take these different groups into consideration. Accessible pages do not have to be plain and text-based, but take special care to avoid presenting material in a manner that excludes potential users.

The following guidelines will help make your HTML pages more accessible to users with disabilities, particularly those who are 'reading' your pages with the aid of a screen reader and voice synthesizer. These guidelines also help keep your pages usable with all browsers, especially non-graphical browsers such as Lynx.

•	Provide meaningful text for all links (A elements).

•	Include alternate text (using the ALT attribute) for all images.

•	Use client-side image maps instead of server-side image maps (to make them accessible to the visually impaired using the tab function in Internet Explorer 3.0).

•	Include alternate (ALT) text for each image map AREA.

•	Place a textual list of all image map links elsewhere on the page.

•	Choose readable combinations of text and background colors.

•	All tables should be accompanied by a link to a text-only presentation of their content.

•	All forms should be accompanied by a link to a text-only presentation of their content.

•	Text boxes in forms should have default content that suggests the kind of information the user should enter.

•	Always include a NOFRAMES version of a page that uses frames.

•	Avoid hyperlinks longer than ten words. Longer links may be cut off by screen readers.

•	Ensure that there are separating spaces or characters between each hyperlink.

•	Avoid using the MARQUEE and BLINK elements.

•	Keep the color and font constant within each word.

•	Include descriptive text for BGSOUND (background sound) files.

•	Include descriptive text for audio files.

•	Include descriptive text for video files.

•	Include alternate and descriptive text for applets.

•	Include alternate and descriptive text for ActiveX objects.

•	Warn the user if Client-Server Push-Pulls are being used.

Note: These accessibility guidelines were provided by the Adaptive Technology Research Centre at the University of Toronto. More information about the ATRC is available at: http://www.utoronto.ca/atrc


Inaccessible Element: Missing link text

Link anchors (text in A elements) should provide a description of the content being linked. Avoid phrases such as 'Click here.'


Inaccessible Element: APPLET

Applets can take many forms, but they are often very visual and therefore inaccessible to users with visual disabilities. This inaccessibility can be compensated for with the addition of a short alternate text label and a longer descriptive text. HoTMetaL PRO prompts you to use both of these methods during the insertion process. For users whose browsers do not support Java, alternative content should be entered that is identical to the alternate text. It is important that all functions available within the applet also be listed in text format elsewhere in the document or site.


Inaccessible Element: BGSOUND

The BGSOUND element is used to define a background sound for a document. If the background sound includes instructions, announcements, or other important content, that content should also appear textually on the page. For added accessibility descriptive text can be used. The length, style, and content of background audio clips vary widely from one situation to the next and depend on the creative discretion of the author. Descriptions of these clips might include a detailed script of all dialogue, a written description of any music that can be heard, and a text-based representation of any sound effects that occur in the recording.


Inaccessible Element: BLINK or MARQUEE

Text is generally considered to be inaccessible if it cannot be interpreted by a screen reader program. Flashing or moving text is not only inaccessible to screen reading programs, but it is also difficult to read for users of screen magnifiers. Text that does not stay still is difficult to track, focus on, and read. Try drawing attention to text using emphasis, italics, or bold instead.


Inaccessible Style: Background Images or Colors

The wrong choice of background image or color can affect the readability of a page for everyone, but users with a variety of visual disorders are most affected. Graphical content, such as company logos, will be completely missed by users who use screen reading programs, and the reading process for users who must magnify the screen one small portion at a time is disrupted by the absence of a solid background. The enhanced background might also reduce, or eliminate, the readability of a document for users who are color blind, have problems focusing, or whose eyes tire and strain easily. These problems can be compounded by poor choices in foreground text colors. If background images and colors are used, special care must be taken to ensure that pages are readable and that all content appears elsewhere on the page in textual form.


Inaccessible Style: Text Color

The wrong combination of background and text colors can affect the readability of a page for everyone, but users with a variety of visual disorders, such as color blindness, focusing problems, or eyes that tire and strain easily, are most affected. Another problem is the practice of adding large blocks of white on white text to increase search engine scores. This is invisible to the average viewer, but the text will be picked up by a screen reader, much to the confusion of the user. When defining colors for text, ensure that the text is readable against the background and that links are easily recognized. The use of color is not always a problem: it can be used to make reading easier and aid comprehension.


Inaccessible Attribute: FONT Size

Font size is often used as an alternative to headings. One practice, called Drop Caps, is to use a larger font size for the first letter of a word than for the rest of the word.

Although this is a common practice in print, an HTML aware screen reader will read the first letter followed by the rest of the word. For example, the word "the" becomes "tee he". For better accessibility, headings should be used whenever possible. Headings also maintain and enhance the document structure.


Inaccessible Style: Forms

Forms are generally a very useful and user-friendly way of soliciting input from readers. However, despite technological improvements, browsers and assistive technologies may have trouble conveying the format and content of forms to their users. Therefore, it is suggested that a text-only version of the form, including both email and postal addresses, be available on a separate linked page. This will allow users with visual disabilities to save the file locally and reply by email, or to print out the form and reply by mail. This solution will also provide a way of accommodating users who are wary of sending personal information over the Internet.


Inaccessible Style: Text Boxes and Text Areas

Text boxes and text areas can be a problem for screen reader users because their labels may be on another line or cut off. It is helpful to include the field name as the default field text for edit boxes. For example: "your name" or "institution." This serves to clarify the function of edit boxes with text labels that may have been cut off by the screen.


Inaccessible Style: Frames

Frames offer a way to split up the screen into functional window-like panes. Some of these panes may remain displayed during an entire site visit, allowing site guides or other useful information to be permanently displayed. Although this can be very helpful to some users, screen reading programs typically read from left to right, ignoring pane boundaries and mixing content from both sections. This can be incredibly confusing and may render the entire site inaccessible. Also, not all browsers support the FRAMESET element. To ensure accessibility to all users, sites using frames should offer the option of turning off frames and displaying content in the normal fashion using the NOFRAMES tag.


Inaccessible Element: IMG

The most common way of dealing with the inaccessibility of images is by making use of ALT (alternate text) attribute of the IMG element. Alternate text provides a textual description which is displayed in place of the image by text-based browsers and graphical browsers whose image loading has been disabled. ALT text is particularly important to users with visual impairments, who use screen reading programs that are unable to interpret images of any kind, including pictures of words. Since the ALT text is displayed independently from the image, the description must be adequate enough to keep the user informed. For example: if the image depicts a company logo, the corresponding ALT text might consist of the company name, along with a short description of the logo, itself. If the image is anchored, it is important to emphasize the button's functionality rather than its overall appearance. For example: using a label such as 'home' or 'help' would be more informative than a description of the button's visual appearance.

Note: ALT text descriptions should be kept brief because many browsers display the text within a limited area. This means that a description that is too long will not appear in its entirety. In situations where a longer description is required, a short ALT text description should still be included with the image along with a descriptive text link. The Image Attributes, which appears during image insertion, includes a Description button for adding descriptive text.


Inaccessible Attribute: IMG-ISMAP (Server-Side Image Maps)

Image maps are a very popular and effective way of conveying information. However, they require that the user have a graphical browser with a fast connection, and the physical ability to see the image on the screen. Microsoft Internet Explorer 3.0 introduced a keyboard function that allows users to TAB  through the AREA's of Client-Side image maps. If alternate text labels are provided for each AREA then these image maps become accessible to the visually impaired. Therefore, it is suggested that Server-Side image maps be avoided in favor of Client-Side image maps. However, it is still necessary to provide a text menu for users with other browsers or slow connections. This text menu should be located just below the image map and contain all the same options as the image map. The menu should also include a text-based title, such as "Image Map Options".


Inaccessible Attribute: IMG-USEMAP (Client-Side Image Maps)

A Client-Side Image Map is composed of hotspots called AREAs. Microsoft Internet Explorer 3.0 introduced a keyboard function that allows Client-Side Image Maps to be accessed as long as alternate text (ALT) labels are provided for each AREA. These text labels should provide the user with adequate information as to what will occur if a particular AREA is selected. For example: if the image is a button, it is important to emphasize the button's functionality. If the image is a hyperlink, it is important to emphasize the type of content of the linked site. An ALT text for the full image is also necessary to indicate that this image is an image map. It is still necessary to provide a text menu for users with other browsers or slow connections. This text menu should be located just below the image map and contain all the same options as the image map. The menu should also include a text-based title, such as "Image Map Options".


Inaccessible Element: OBJECT

Objects can take many forms, but they are often very visual and therefore inaccessible to users with visual disabilities. This inaccessibility can be compensated for with the addition of a short alternate text label and a longer descriptive text. Both of these methods are available on the Object Attributes dialog box, which appears during the insertion process. For users whose browsers do not support OBJECT, alternate content should be entered that is identical to the alternate text. I t is important that all functions available within the object also be listed in text format elsewhere in the document or site.


Inaccessible Style: Client-Server Push-Pulls

In a Client-Side Push-Pull, images are pushed on top of each other in succession to form pages with dynamic content. Often this is used to construct changing billboards or animation. Unfortunately, this practice makes the page inaccessible to users who rely on ALT text because many assistive technologies assume a static page format. If a Client-Side Push-Pull is unavoidable, users should be warned of its existence by a short note at the top of the page. This warning may explain why their access device reacts strangely. In addition, all content contained within the Push-Pull should be presented elsewhere in textual format.


Inaccessible Element: TABLE

Tables are usually an excellent way of displaying large amounts of data in a way that is easy to understand. However, screen reading programs read lines of text that appear on the screen from left to right. This means that column breaks (blank spaces between columns) are ignored, and the text is read in one continuous, non-contextual stream from left to right. This problem becomes especially difficult to handle when table cells contain entries that are more than one line high. Since screen readers typically read line by line they may read the two lines of the cell at different times, making the table difficult to understand. It is suggested that all the information contained in the table be provided elsewhere in a purely linear, text-based format. This text can be placed in a separate file that can be accessed through a hyperlink if necessary. Recently, tables with invisible cell boundaries have begun to be used to organize the layout of pages, including integrating columns of text and images. This practice is also very inaccessible for the reasons stated above; most screen readers read left to right and ignore the column boundaries, merging the columns into an unreadable jumble.


Inaccessible Style: Wordy Links

Some visually impaired users use screen reading programs which allow them to cycle forwards and backwards through the hyperlinks on a page. This movement is achieved via the use of keyboard commands, and allows users of this technology to quickly obtain a link list without having to read the document line-by-line. It is important to avoid link names that are more than ten words long, or those links that take up more than one line. This not only makes the process of obtaining a link list more time effective for screen readers, but avoids problems with screen reading programs that are not capable of interpreting multi-line links correctly.


Inaccessible Style: Non-Separated Links

Some visually impaired users use screen reading programs which allow them to cycle forward and backward through the hyperlinks on a page. This movement is achieved via the use of keyboard commands, and allows blind readers to quickly obtain a link list without having to read the document line by line. Non-separated link names should be avoided because screen reading programs tend to read multiple links as a single link, making link selection ambiguous. This problem can be avoided by placing unlinked characters such as numbers or commas as well as line breaks between links.


Inaccessible Style: Missing Descriptive Text for Audio Files

Descriptive text is a very important way of making audio clips accessible to users in a variety of circumstances. Groups of individuals who can benefit from such descriptions include those with hearing impairments, slow modems or network connections, or computers that lack multimedia capabilities.


Inaccessible Style: Missing Descriptive Text for Video Files

Descriptive text is a very important way of making video clips accessible to users in a variety of circumstances. Groups of individuals who can benefit from such descriptions include those with visual impairments and slow modems or network connections.


Writing alternate (ALT) text

Alternate text can be associated with an image (IMG), image map area (AREA), Java applet (APPLET) and ActiveX object (OBJECT). This text (the contents of the ALT attribute) is displayed instead of the image or object when image loading is turned off and by text-only browsers such as Lynx. Some browsers also display alternate text while images are loading. The way alternate text is displayed also differs between browsers. Some browsers display the alternate text as a single line that may be cut off by the screen while others force the text into the dimensions of the image which is a problem when the image is very small. Consider the following guidelines to writing ALT text:

•	Keep it short (less than ten words). If a longer description is necessary, use descriptive text .

•	If the image is within an anchor emphasize the destination in the alternate text.

•	If the image is an image map, make a note of this in the alternate text.

•	Graphics that are being used as list bullets should have the letter 'o' for the alternate text.

Browsers that do not support Java or ActiveX cannot display ALT text for these objects, either. Alternative content that is identical to the alternate text should be provided for users of these browsers. If accessibility prompting is turned on, the Applet Properties and Object Properties dialog boxes provide space to write alternative content.


Writing descriptive text

Descriptive text is a longer, more detailed description of an inaccessible element than would be appropriate for alternate text. The descriptive text is contained in a separate file, accessed by a link containing the single letter 'D' (or 'd') immediately following the element in the document. HoTMetaL PRO simplifies the process of authoring this text by handling the creation of the file, insertion of the D-link, and insertion of the descriptive text into the file. All you have to do is enter the descriptive text itself and change the default descriptive text file name if desired. The descriptive text editor makes the editing process more efficient by retrieving any descriptive text already authored for the description file. If changes are made, the old text is automatically replaced with the new text.


Using the descriptive text editor

Descriptive text is a relatively new practice that is meant to complement the short description provided by the alternate text and increase the accessibility of a site. Basically, a D-link (for description) is placed just after a potentially inaccessible element in the HTML file. This link connects to a text-only description of the element. Descriptive text is usually provided for applets, images, objects, audio files, and video files in order to make them accessible to users who are visually or hearing impaired, using text-only browsers, or using slow connections.

HoTMetaL PRO includes a built-in utility for writing descriptive text. This utility is available whenever one of these objects is inserted, as long as Automatic accessibility prompting is set to On or Strict in the HoTMetaL PRO Options dialog box.

To enter descriptive text:

•	Click on Description.... The Accessibility Description dialog appears.

•	Type a description in the text box.

•	Enter a path and file name for the text in the Descriptive file text box, or click on Choose... to select an existing file.

•	Click on OK.

Consider the following guidelines to writing descriptive text:

•	Describe any text that appears in the object.

•	Describe the size, look, and organization of the object.

•	Describe the main function of the object.

•	Transcribe any voices, sounds, or action.

•	Do not include hyperlinks or other HTML markup.


Setting the accessibility prompting level

You can choose one of the following accessibility prompting levels in the Options dialog box:

•	Off – Deactivates accessibility prompting. The dialog boxes and pop-ups that appear as you insert elements will not prompt you to create accessible alternatives.

•	On – The attributes dialogs for elements that require alternative or descriptive text for complete accessibility will include prompts for such text.

•	Strict – Activates the pop-up warning system, in addition to the prompts for alternative and descriptive text. This system will display warnings about the inaccessibility of the TABLE, BGSOUND, FRAMESET, MARQUEE, and BLINK elements as soon as they are inserted using the Element List window.

To change the accessibility prompting level:

•	Choose Options... from the Tools menu. The Options dialog box appears.

•	On the General tab of the Options dialog box, set the desired accessibility prompting level.


Validating for accessibility

People with disabilities often use special technology to give them access to HTML documents. As a result, HTML documents should conform to rules for accessibility. For example, many people assume that with the increasing number of users with graphical browsers, the alternative text (ALT) attribute for images is no longer necessary. Some accessibility technologies, however, make use of the ALT attribute for users with impaired vision.

You can ensure that your document is accessible to users with special assistive technology by choosing Check Accessibility from the Tools menu. HoTMetaL PRO checks your document against a set of guidelines. If your document is not marked-up to be accessible to everyone, a message appears with a summary list of the accessibility problems:

Click on OK to open a succession of warning dialog boxes, which explain each problem. Click on Cancel to stop validating the document for accessibility. Dialog boxes appear for some problems that can be solved immediately; in these dialogs you can do the following:

•	Correct the problem and click on Apply.

•	Click on Skip to proceed to the next accessibility problem without making any changes.

•	Click on Stop to quit the correction process.

If your document does not pass the accessibility check, it does not mean that the HTML markup is incorrect. However, it is advising you that your document could be marked up to be more accessible to people with disabilities.


Typing special characters and symbols

HoTMetaL PRO supports the ISO 8859/1 character set (also called ISO Latin-1) and a number of other 'special' characters and symbols that do not have a corresponding key on the keyboard.

To enter a special character (a non-ASCII alphabetic character):

•	With NumLock on, hold down the Alt key and type a zero (0) followed by the ANSI numeric code for the character. For example, Alt+0233 will enter the character 'é'.

Or:

•	Choose Special Characters from the Insert menu, press Ctrl+Shift+E, or choose Toolbars... from the View menu and turn on the Special Characters toolbar. The Special Character toolbar appears.

•	Click on the character you want to insert.

To enter a symbol (a currency, mathematical, punctuation, or publishing symbol):

•	Choose Toolbars... from the View menu and turn on the Symbols toolbar. The Symbols toolbar appears.

•	Click on the symbol you want to insert.

Note: When you save a file, non-ASCII characters are converted to entities. For example,'é' is converted to the entity definition that Web browsers will recognize: '&eacute;'.

Non-breaking spaces

A non-breaking space looks like an ordinary space, but if you put this kind of space between two words, browsers will not break the line of text at that location. Another common use for non-breaking spaces is to force the browser to display the border or background color of empty table cells. A non-breaking space is displayed as an ordinary space in the HoTMetaL PRO WYSIWYG view, and as an nbsp icon in the Tags On view.

To insert a non-breaking space, type Ctrl+Shift+Space.


Editing HTML source

HoTMetaL PRO's HTML Source view lets you edit your document as a raw HTML file. You can use this to edit invalid HTML, or to create and edit raw HTML. HTML Source view displays all of the elements, attributes, and content that make up the document, using different colors to distinguish the content and various types of markup. You can change the display font and font colors for this view; you can also modify the layout of the source displayed.

To view HTML source, do one of the following:

•	Choose HTML Source from the View menu.

•	Click on the HTML Source view button (the left-most button in the [image] group) at the bottom left of the document window.

Not all of the menu commands and toolbar buttons are available in HTML Source view. Among those that are available are:

•	Element..., Horizontal Rule, Link..., and Image... in the Insert menu.

•	Most commands in the Format menu.

•	Insert Table... and Insert Caption in the Table menu.

•	All commands in the Form menu except Form Field Properties....

In general, in HTML source view you can use the menus or the toolbars to insert elements and surround the selection with an element, but not edit attributes or set properties that rely on attributes. This kind of editing must be done by entering HTML directly in the document window.

Context-sensitive rules checking is not turned on in HTML Source view. HoTMetaL PRO will not prevent you from entering invalid HTML, but you can still choose Check HTML in the Tools menu to check the validity of your document.

You can indent or outdent blocks of text in HTML source view by pressing Tab or Shift+Tab.

HoTMetaL PRO organizes the HTML by displaying the line numbers on the left side of the window in Source view. If a line is longer than the current width of the document window, it will wrap around. This is referred to as soft wrapping. You can configure the wrapping behavior in the Source View tab of the Options dialog box.

You will also notice that the HTML markup is displayed in different colors. This is to organize the markup so that you can easily identify elements, attributes, and text. By default, elements are in blue, attributes are in red, and text is in black.

The DOCTYPE declaration, visible at the top of the file in HTML Source view, specifies the DTD, the file that describes the how elements and attributes can validly be arranged.

  More on this topic


Changing the HTML Source view display

You can change several display properties for the HTML Source view: fonts, colors, word wrapping, how tab characters are used, and line numbering. To set these properties:

•	Choose Options... from the Tools menu.

•	Click on the Source View tab in the Options dialog box.

 (These options do not change the contents of the document, but rather how it is displayed in HTML Source view. To configure how the text and markup are laid out, click on the Source Layout tab.)

Fonts and colors

You can change the font and font size used in HTML Source view, and the colors used to display the following document components:

•	Ordinary text (non-markup)

•	Start-tags (including attribute names)

•	End-tags

•	Attributes (that is, attribute values)

•	Scripts (the contents of SCRIPT elements)

•	Comments

•	The DOCTYPE declaration (located at the top of the document in HTML Source view).

These settings do not affect the way your document is displayed in a browser.

Set any of the following font options, which will apply to the entire HTML Source view:

•	Font – changes the font. Choose a font from the drop-down list.

•	Size – changes the font size. Choose a size from the drop-down list.

To change the colors used for ordinary text, set any of these options:

•	Foreground – changes the text color. Click on the button to select a color.

•	Background – changes the HTML Source view background color. Click on the button to select a color.

To change the colors of various components of the HTML markup:

•	Make sure HTML Colors is turned on.

•	Click on the button for any of the document components and choose a color.

To change the colors of various components of scripts embedded in the document via SCRIPT elements:

•	Make sure Script Colors is turned on.

•	Click on the buttons for any of the script components and choose a color.

Word wrapping

You can change word wrap options. This refers to how lines are displayed in the HTML Source window if they are longer than the current width of the window. The options are:

•	Off – turns word wrap off, so that the lines extend past the right edge of the window.

•	Break within words – long lines wrap onto the next line, and can be broken within words.

•	Break between words – long lines wrap onto the next line, and can be broken only between words. If you choose this option you can also choose to allow or disable line breaking inside tags.

If a line wraps, it does not cause the line number in HTML Source view to increase.

Tab options

The Tab option lets you choose how tab characters will be treated in HTML Source view. Note that (except in PRE elements) a sequence of one or more tab or space characters will be collapsed to a single space if you switch to Tags On or WYSIWYG view and save the file; this is consistent with the rendering of 'white space' characters by most HTML browsers.

•	Enter a Size value between 1 and 16 to specify the number of characters between tab positions in HTML Source view.

•	By default, pressing Tab will cause HoTMetaL PRO to enter one or more characters to move the insertion point to the next tab position. You can turn on Use tab character to cause a tab character to be inserted instead.

•	If Auto-indent is turned on, new lines created by pressing Enter will be automatically indented at the same level as the previous line.

Line numbering

Line numbering enables you to hide or show line numbering in the HTML source window.


Changing the HTML Source view layout

HoTMetaL PRO uses indentation and line breaking to display HTML source in a way that helps users distinguish content and various kinds of markup. While the default settings should make it easier for you to work with source code (by comparison with a text editor), you may want to adjust the settings to make certain elements stand out. These settings also determine how the file is saved.

To change the HTML Source view layout:

•	Choose Options... from the Tools menu. The Options dialog box appears.

•	Click on the Source Layout tab.

Any options you choose are applied to files saved from Tags On and WYSIWYG views. If you turn on the Enable automatic layout checkbox, these options will also be applied when you switch from Tags On or WYSIWYG view to HTML Source view.

Files are saved from HTML Source view 'as-is'. To force layout options to be applied to HTML Source view, turn on Enable automatic layout, switch to Tags on or WYSIWYG view, and then switch back to HTML Source view. If you do not want automatic layout options to be applied to your files, turn off automatic layout, and do not save your files in Tags On or WYSIWYG view; from the View tab, you can also make HTML source view the default view in which files are opened and created.

Line endings

 End of Line sets the line ending options. The options are:

•	Each line ends with carriage return (CR) and line feed (LF), as in Windows.

•	Each line ends with line feed (LF) only, as in UNIX.

•	Each line ends with carriage return (CR) only, as in Macintosh.

Pretty-printing

You can also affect how specific types of elements will be laid out; this is sometimes referred to as pretty-printing.

•	Choose an Indent size: this is the number of characters that the contents of an element will be indented if indent contents (see below) is turned on for that element.

•	You can choose layout options for one or more elements (you don't have to click on Apply for each element—choose options for as many elements as you need to and then click on Apply).

•	Select the element from the Elements list (!-- stands for HTML comments).

•	Turn on Indent contents if you want the contents of the element to be indented. This option is commonly chosen for list elements such as OL and UL.

•	You can add a blank line or new line (line break) before or after the start-tags or end-tags.

To restore the Source Layout options to the defaults:

•	Click on Restore Defaults.

•	Close the window by clicking on OK.


Using WebBot components

WebBot™ components (also called FrontPage components) are a feature of Microsoft FrontPage™ and Web servers that support the FrontPage Server Extensions. WebBot components consist of some special markup, and sometimes other content. A WebBot component acts as an instruction to the client or server to process the content in a special way or take some other action. If you intend to use any of the server-side WebBot components, you should ask your ISP if their server supports the FrontPage Server Extensions.

HoTMetaL PRO enables you to open pages containing WebBot components and enter your own WebBot component markup. HoTMetaL PRO does not interpret and run WebBot components.

HoTMetaL PRO supports the standard FrontPage WebBot components. If new WebBot components are added to the product, or you create your own, you can extend HoTMetaL PRO's capabilities in order to support them.

WebBot components are invisible in WYSIWYG view; in Tags On view they are displayed as a pair of tags containing the WebBot name, with the WebBot markup between the tags. You can view and edit the WebBot markup directly in HTML Source view.

To enter a WebBot component, switch to HTML Source view, and enter the WebBot component markup directly. WebBot components are implemented using HTML comments. Usually there is a 'start comment' and an 'end comment'; between the comments there can be special content, such as an HTML form that interacts with the WebBot, or some non-standard HTML markup that is hidden and will be processed only by an application that understands the WebBot component. For example:

<!--webbot bot="HTMLMarkup" startspan --> <newtag>Interpret me, if you dare!</newtag> <!--webbot bot="HTMLMarkup" endspan -->

This example shows the 'HTMLMarkup' WebBot component, which enables you to hide non-standard markup (for example, ColdFusion markup); see SoftQuad's Support Center (http://www.softquad.com/supportcenter) for tips.

HoTMetaL PRO provides partial support for Active Server Page (ASP) markup; however, any ASP markup that cannot be opened in the normal way requires the 'HTMLMarkup' WebBot component in order to be opened in HoTMetaL PRO


Adding support for new WebBot components

HoTMetaL PRO can open pages containing the standard FrontPage WebBot components. If new WebBot components are added to the product, or you create your own, you can extend HoTMetaL PRO's capabilities in order to support them. You do this by editing the hmpro6.ini file, in the HoTMetaL PRO folder.

For each new WebBot component, there are three settings:

•	non_SGML_start_comment_N

•	non_SGML_end_comment_N

•	non_SGML_tag_N (optional)

In each case, N is a number. For each group of settings, use the next available unused number: if there are already 10 groups, you would use non_SGML_start_comment_11, and so forth.

These settings are used as follows:

•	non_SGML_start_comment_N should be set to some text or a pattern that defines the markup inside the 'start comment'. You can use the same special characters in patterns as are used in search patterns in HoTMetaL PRO.

•	non_SGML_end_comment_N should be set to some text or a pattern that defines the markup inside the 'end comment'. You can use the same special characters in patterns as are used in search patterns in HoTMetaL PRO.

•	non_SGML_tag_N should be set to the name of the tag that is will represent the WebBot component in the HoTMetaL PRO Tags On view. If you don't make this setting, the name WEBBOT will be used.

You may find it helpful to use the existing settings in the hmpro6.ini file as models when creating new settings. In many cases, you may be able to implement the new settings by copying existing ones and simply changing the WebBot component name.

This extension mechanism does not have to be used only to define new WebBot components; it can also be used to define your own special markup.


Working with forms

What you'll learn in this chapter

You can create HTML forms, like paper forms, for users to fill out information according to your specifications. You can guide the user through:

•	Single-line  or multi-line  text input.

•	'Yes' or 'no' choices made with a check box.

•	'One of the following'-style choices made with option (radio) buttons.

•	Selections from drop-down lists or selection lists.

•	Entering a password.

•	Attaching (uploading) a  file.

•	Calling a script  embedded in your document.

Usually forms contain a button that the user clicks on to submit  the form data, and another button that the user can click on to reset  the form fields to their default values.

When the user submits the form,  it goes to either an email address or to a program on a Web server.

To create a form field, click on the appropriate button in the Forms toolbar, or choose the appropriate command in the Form menu. If the Forms toolbar is not visible, click on the toolbar area and choose Forms from the pop-up menu.

In HTML, all form fields must be enclosed in a FORM element. You can start creating your form by inserting a FORM element explicitly, or you can just insert any form field, and HoTMetaL PRO will create the FORM element automatically. In WYSIWYG view, the FORM element is not displayed. In Tags On view, the FORM start- and end-tag icons give you a useful visual cue to the form's boundaries.

To create a FORM element explicitly:

•	Click on the [image]   toolbar button or choose Insert Form from the Form menu.

  More on this topic


Form field properties

Fields in a form have a number of properties that you can (or, in some cases, must) edit. Some common properties are:

•	 Name – Most form objects must have a name. Except with radio buttons, a name cannot be used twice in the same form. When the form is submitted, the name is sent along with the input data for that object, so that the receiving program will know which graphical object the data came from.

•	 Value – The value associated with a form object is normally the data that the user enters. Some objects—text boxes, password fields, drop-down lists, selection lists, multi-line text areas—let you specify a default value. Check boxes have a default value of 'off' or 'on', depending on whether the user checks them; this can also be overridden. Option (radio) buttons must be given a value when the form is created.

•	 Size – You can specify the default size of some objects. Widths are specified in characters; heights are specified in lines.

•	 Checked – You can specify that a check box or option (radio) button is checked (turned on) by default.

Once you have inserted a form object, you can edit its properties in three ways:

1	Double-click on the object.

2	Right-click on the object and then choose Form Field  Properties... from the pop-up menu. (The menu item changes depending on what kind of object you click on: Text Box Properties..., Option Button Properties..., and so forth.)

3	Click once on the object and then choose Form Field  Properties... from the Forms menu. (The menu item for this command also changes, depending on what kind of object you click on).

Each of these actions brings up a dialog box, specific to each type of object, in which you can edit the object's properties. Click on the Help button in each dialog box for more information on the properties for that kind of form object.

These properties correspond to attributes of the object: if you wish to edit the attributes directly, right-click on the object and choose Attribute Inspector from the pop-up menu.


Creating a text field

A text box lets the user enter a single line of text in a form.

To insert a text box:

•	Click on the   [image] button in the Forms toolbar or choose Text Box from the Form menu.

A text box appears in the form. You can get a good idea of what this form element will look like in your Web browser from how it looks in the HoTMetaL PRO document window.

To set the properties of the text box:

•	Double-click on the text box, or right-click on the text box and choose Text Box Properties... from the pop-up menu.

The Text Box Properties dialog box lets you set the most important properties of a text box.

•	Name – This value is used when the browser sends the input data to the server, in order to identify which text box,   drop-down list,  etc. on the form, a particular piece of data came from. You should always set a value for Name; this value should be unique—it should not be used for any other object in the form. HoTMetaL PRO will automatically generate a name of the form 'Text1', 'Text2', and so forth—you can keep this name or enter something more descriptive.

•	Value – If you specify text here it will be displayed in the text box by default.

•	 Size – Specifies the text box size in characters. Entering a number here will change the size of the text box. If no number is entered, the text box will be 20 characters long.

•	 Max. Length – The maximum number of characters that can be entered in the text box in a browser.


Entering several lines of text (scrolling text area)

A text box  in a form accepts just one line of text. If you need to let your users enter several lines of text at once (to enter an address, for example), you should use a scrolling text area. This is a rectangular area that has vertical and horizontal scrollbars so that the user can enter as many lines of text as are needed.

•	 Click on the   [image] button, or choose Text Area from the Form menu.

HoTMetaL PRO will insert a graphical representation of a scrolling text area, which looks similar to the way this object is displayed in most browsers.

To set the properties of the text area:

•	Double-click on the text area, or right-click on the text area and choose Text Area Properties... from the pop-up menu. This brings up a dialog box that lets you set the most important properties of a text area.

•	Name – This value is used when the browser sends the form's data to the server, in order to identify which object in the form a particular piece of data came from. You should always set a value for Name; this value should be unique—it should not be used for any other object in the form. HoTMetaL PRO will automatically generate a name of the form 'MultiText1', 'MultiText2', and so forth—you can keep this name or enter a more meaningful choice.

•	Default Content – The text you enter here will be the default text displayed in the text area by the browser.

•	Width – Enter the number of characters wide that you want the text area to be.

•	Rows – Enter the number of rows that you want.

•	Text Wrapping – You can choose virtual, physical, or no text wrapping.


Creating drop-down lists and list boxes

Drop-down lists and list boxes are two ways of letting a user make a choice from a list of choices. A drop-down list is a menu from which the user can make one choice; a list box is a scrollable list from which the user can make one (or sometimes more than one) choice. Which one you use depends on which graphical object you think works best in your form, and whether you want to offer more than one choice—if you do, you have to use a list box.

To create a drop-down list:

•	Click on the [image] toolbar   button or choose Dropdown List from the Form menu.

To create a list box:

•	Click on the [image] toolbar   button or choose List Box from the Form menu.

 HoTMetaL PRO will display a graphical representation of the drop-down list or list box.

A drop-down box or list box contains one or more items (also called options).

To add items and edit the object's properties:

•	Double-click on the object, or right-click on the object and choose List Properties... from the pop-up menu.

 The List Properties dialog box appears, letting you create and edit a list of choices.

You can set the following properties:

•	Name – This value is used when the browser sends the form's data to the server, in order to identify which object in the form a particular piece of data came from. You should always set a value for Name; this value should be unique—it should not be used for any other object in the form. HoTMetaL PRO will automatically generate a name of the form 'Select1', 'Select2', and so forth—you can keep this name or enter a name of your own choice.

•	Size – This is the number of list items that are displayed in the browser. If this value is greater than 1, the list automatically becomes a list box, even if it was created as a drop-down list.

•	Allow Multiple Selections – If you want the user to be able to choose more than one item from the list, turn on the check box. If you choose this option, the list automatically becomes a list box, even if it was created as a drop-down list.

Note: If 'Size' is set to '1' and 'Allow Multiple Selections' is turned off, the list automatically becomes a drop-down list.

Each list item consists of a label and a default value. The label is the text for that item that is displayed in the browser. The value is the text that the browser sends, if this item is selected when the form is submitted.

Adding items to the list

To add an item:

•	Enter the label in the List Item text box.

•	Enter a value in the Value text box. You should use a different value for each item.

•	If you want this item to be selected automatically when the list is displayed, turn on the Default Item check box. There can be only one default item in the list.

•	Click on Add >>.

 To edit an existing item:

•	Click on the item that you want to edit.

•	Click on Remove/Edit. The item will 'jump out' of the list and become editable.

•	Make the desired changes to List Item, Value, and Default Item.

•	Click on Add >>. The item you just edited will move back into the list, at the end.

 To delete an existing item:

•	Click on the option that you want to delete.

•	Click on Remove/Edit. The item will 'jump out' of the list.

To change the order of items in the list:

•	Click on the item that you want to move.

•	Click on the [image] button to move the item up or the [image] button to move the item down.


Creating check boxes

Check boxes let the user make a 'yes/no' choice. These are different from option buttons  which let the user make one choice from a group of choices.

To insert a check box:

•	Click on the [image]    toolbar button or choose Check Box from the Form menu.

HoTMetaL PRO inserts a check box icon.

To edit the properties of a check box:

•	Double-click on the check box, or right-click on the check box and choose Check Box Properties... from the pop-up menu.

You can set the following properties:

•	Name –This value is used when the browser sends the form's data to the server, in order to identify which object in the form a particular piece of data came from. You should always set a value for Name; this value should be unique—it should not be used for any other object in the form. HoTMetaL PRO will automatically generate a name of the form 'CheckBox1', 'CheckBox2', and so forth—you can keep this name or enter a name of your own choice.

•	 Value – When the form is submitted, the default value associated with checked boxes is the word 'on' (unchecked boxes are not submitted with the form's data). If you want to override this default, enter the text to be associated with the check box in the Value text box.

•	If you want this check box to be turned on (checked) by default, turn on the Checked? check box.


Creating option buttons (radio buttons)

A group of option buttons (also called radio buttons) lets the user make one (and only one) choice from a group of choices.

To insert an option button:

•	Click on the [image]    toolbar button or choose Option Button from the Form menu.

HoTMetaL PRO inserts an option button.

To edit the properties of an option button:

•	Double-click on the option button, or right-click on the option button and choose Option Button Properties... from the pop-up menu.

You can set the following properties:

•	Name – This value is used when the browser sends the form's data to the server, in order to identify which object in the form a particular piece of data came from.  Each item in a group of related option buttons must have the same name, so that the browser will know that only one button in the group can be turned on at the same time. HoTMetaL PRO will automatically generate a name of the form 'Radio1'—you can keep this name or enter a name of your own choice. If you create another group of radio buttons in the same form, you must use a different name for that group.

•	Value – All option buttons must have a value; this value is submitted by the browser if the option button is turned on when the form is submitted. These values should be unique within each group of buttons with the same name. HoTMetaL PRO will generate unique values of the form 'Value1', 'Value2', and so forth; if you want to override this default, enter a value of your choice in the Value text box.

•	If you want this option button to be turned on (checked) by default, turn on the Checked? check box. Only one option button in a group can be turned on by default.


Creating a reset button

Forms usually contain a reset button that restores all the form's controls (text boxes,  radio buttons, etc.) to their default values.

To create a reset button:

•	Click on the [image]    toolbar button, or choose Reset Button from the Form menu.

To set the properties of a reset button:

•	Double-click on the reset button, or right-click on the reset button and choose Reset Button Properties... from the pop-up menu.

You can set the following properties:

•	Name – Even though you can set this value, reset buttons don't generally need a name since they aren't submitted to the server.

•	Value – If you enter text in this box it will become the label for the reset button, instead of the default, 'Reset'.


Creating a submit button

When the user clicks on the submit button the form's data is sent to the server or email address. There are two kinds of submit buttons:

•	The most common kind of submit button looks like a button and has a text label.

•	An image submit button consists of a graphical image.

To create a submit button:

•	Click on the [image] toolbar button to insert an ordinary button or the [image]  button to insert an image submit button, or choose Submit Button or Image Button from the Form menu.

To set the properties of a submit button:

•	Double-click on the submit button, or right-click on the submit button and choose Submit Button Properties... or Image Button Properties... from the pop-up menu.

You can set the following properties:

•	Name – If you have several forms (in this document or in different documents) whose data will be sent to the same recipient (this could be a program or an email address) you should use different values for the name of the submit button so that the recipient will have a way of easily knowing which form the data came from.

•	Value – If you enter text in this box it will become the label for the submit button, instead of the default (usually 'Submit Query').

•	Image File – If you've inserted an image submit button, use this text box or the Edit... button to enter the URL of the image.


Creating a file upload field

A file upload field enables the user to attach a file to the data submitted with the form. A file upload field consists of a text box and, depending on the browser, a button that brings up a file chooser dialog box: the user can specify a file with either of these controls.

To insert a file upload field:

•	 Click on the [image]    toolbar button or choose File Upload from the Form menu.

To set the properties of the file upload field:

•	Double-click on the file upload field, or right-click on the field and choose File Upload Properties... from the pop-up menu.

You can set the following properties:

•	Name – This value is used when the browser sends the form's data to the server, in order to identify which object in the form a particular piece of data came from. You should always set a value for Name; this value should be unique—it should not be used for any other object in the form. HoTMetaL PRO will automatically generate a name of the form 'File1', 'File2', and so forth—you can keep this name or enter a unique name of your own choice.

•	Size – Specifies the  size in characters of the text box part of the file upload field.

•	Max. Length – Sets the maximum length of a filename (including the folder path) that be entered in the file upload field.

•	Acceptable File Types – Enter the list of file (MIME) types that the field can be used to upload.

In order to allow a form to upload files, you must also change the form's 'MIME type':

•	Place your insertion point just to the right of the [FORM> start-tag.

•	Choose Attribute Inspector from the View menu, or press F6.

•	Enter the value multipart/form-data for the FORM element's ENCTYPE attribute.


Creating push buttons to activate scripts

A form can contain push buttons that activate script commands.

To create a push button:

•	 Click on the [image] toolbar button or choose Push Button from the Form menu.

To edit the properties of a push button:

•	Double-click on the push button, or right-click on the button and choose Push Button Properties... from the pop-up menu.

You can set the following properties:

•	Name – This value is used when the browser sends the form's data to the server, in order to identify which object in the form a particular piece of data came from. You should always set a value for Name; this value should be unique—it should not be used for any other object in the form. HoTMetaL PRO will automatically generate a name of the form 'Button1', 'Button2', and so forth—you can keep this name or enter a unique name of your own choice.

•	Value – If you enter text in this box it will become the label for the push button, instead of the default (usually 'Button').

To set up a push button to run a script, you also have to:

•	Select the push button.

•	Press F6 or choose Attribute Inspector in the View menu.

•	Specify a script call as the value of onBlur, onClick, onChange, onLoad, or onSelect, as appropriate.

For more information, see the section Scripts  and any available external documentation on the scripting languages (for example, JavaScript).


Creating a hidden input field

A hidden input field is not displayed in the browser or accessible to the user: it is used to send pre-set information that is use only by the recipient of the form's data. For example, it could identify to the recipient which form the data came from.

To create a hidden input field:

•	 Click on the [image] toolbar button or choose Hidden Input from the Form menu.

To edit the properties of a hidden input field:

•	Double-click on the hidden field, or right-click on the button and choose Hidden Input Properties... from the pop-up menu.

You can set the following properties of a hidden input field:

•	Name – This value is used when the browser sends the form's data to the server, in order to identify which object in the form a particular piece of data came from. You should always set a value for Name; this value should be unique—it should not be used for any other object in the form. HoTMetaL PRO will automatically generate a name of the form 'Hidden1', 'Hidden2', and so forth—you can keep this name or enter a unique name of your own choice.

•	Value – This is the value that will be submitted for the hidden input field when the form is submitted.


Creating a password entry

A password entry is similar to a text box. It is intended for users to submit a password, so the text that the user enters will be blanked (replaced by asterisks) when the user types it; it will, however, be sent along with the other form data when the form is submitted.

To create a password entry:

•	 Click on the [image] toolbar button or choose Password Entry from the Form menu.

To edit the properties of a password entry:

•	Double-click on the password field, or right-click on the button and choose Password Entry Properties... from the pop-up menu.

You can set the following properties:

•	Name – This value is used when the browser sends the form's data to the server, in order to identify which object in the form a particular piece of data came from. You should always set a value for Name; this value should be unique—it should not be used for any other object in the form. HoTMetaL PRO will automatically generate a name of the form 'Password1', 'Password2', and so forth—you can keep this name or enter a unique name of your own choice.

•	Size – Specifies the  size in characters of the password field.

•	Max. Length – Sets the maximum length of the password that be entered in the field.


What happens when a form is submitted

After collecting information from the user, you will want to do something with it—even if you plan only to store it in a database for future use. More often, however, you will be interested in responding to your user. In fact, you should consider responding to your user within a few minutes, confirming that the input has been received and will be acted on. All of this implies some form of processing—probably, but not necessarily, automatic processing.

Typically this kind of processing is handled by programs running on the server. Though these may be written in any computer language and may communicate with the HTML serving processes in a couple of ways, two standards have become predominant: Perl is probably the most common programming language used to write user input processing programs, and Common Gateway Interface (CGI) is the way most server-side processes communicate with the HTML serving processes. If this is strange and new, you're not alone—and it doesn't mean that you have to stop right here in the face of a steep learning curve before you can use a form on your document. Most HTML document editors don't write Perl, or any other kinds of programs, and don't know much about CGI. Instead, they rely on their systems administrators and other programmers to provide the back-end processing that will handle the data flowing in from their HTML pages.

However, it is also possible to receive information from your form documents without preparing any server-side processing. If you want to use forms, but don't have a program set up on your server to process the data, you can send the raw content of the form to an email address, which is a quick and easy way to get form functionality. The content of that email may arrive as plain text or as an attachment, and may require editing. This may be useful in the short term, or for a small volume of responses that you are willing to deal with manually.

  More on this topic


Specifying where the form is submitted

The form's action determines what happens to the data entered by the user when the submit button is pressed. The action can be either a program on a Web server that processes the data, or an email address that receives it. You specify an action by setting a value for the FORM element's ACTION and METHOD attributes.

In WYSIWYG view:

•	Right-click on any form field and choose Attribute Inspector from the pop-up menu.

•	Choose FORM from the drop-down list of elements at the top of the Attribute Inspector window.

In Tags On view:

•	Put the insertion point immediately to the right of the [FORM> start-tag.

•	 Press F6, or right-click and choose Attribute Inspector from the pop-up menu.

At this point you should be editing the attributes of the FORM element. Check that FORM is the selected element—it will appear at the top of the dialog.

•	In the ACTION field, enter the URL for the program or email address that you wish to submit the form data to, and then press Enter. (A URL for an email address must start with 'mailto'; for example: mailto:charles@windsor.org.)

•	If the data is being submitted to a program, set the value for METHOD to either GET (the default) or POST, depending on the requirements of the program. Then press Enter.

•	If the data is being submitted to an email address, set the value for METHOD to POST. Then press Enter.


How the data looks to the recipient

When a browser submits a form's data, it formats it in a standard way that all programs receiving the data should expect. The information is presented in pairs containing a 'name' (corresponding to the name of the   text box,  check box, etc.) and a 'value' (for text boxes  or 'text areas', this will be the data entered; for check boxes the value 'on' is submitted—check boxes that aren't turned on are ignored; for radio buttons the Value is sent).

Each name and its corresponding value are separated by an equal, '=', sign. Each name/value pair is separated by an ampersand, '&'. Spaces are replaced by a '+' sign, and some special characters (notably newline, '=', and '&') are replaced by '%nn', where the n's are digits from  0-9 and/or letters between 'A' and 'F'.

For example, if you have a text box named 'speak' that contains the text 'duck soup', a check box named 'english' that is turned on, and a submit button named 'Submit1' with the label 'Submit Query', the form's data will look like this when submitted by the browser:

speak=duck+soup&english=on&Submit1=Submit+Query


The HTML behind the form

This section briefly discusses the HTML markup that represents form objects. You can create and edit forms using the Element... and Attribute Inspector commands, but in most cases the frame editing commands will be faster and more convenient.

All form objects are surrounded by a FORM element.

Most form objects (text boxes, check boxes, radio buttons, submit buttons) are represented by INPUT elements. The value of the INPUT's TYPE attribute determines what type of object it represents; for example, if TYPE has the value TEXT (this is the default), a text box will be generated.

List boxes and drop-down lists are represented by the SELECT element; each item in the list is represented by an OPTION element. A SELECT element represents a drop-down list if its SIZE attribute is set to '1' (one) and its MULTIPLE attribute has no value. Otherwise it represents a list box.

A scrolling text area is represented by a TEXTAREA element.


Creating frames

What's covered in this chapter

This chapter describes how to use HoTMetaL PRO to create pages that divide the browser window into multiple regions using frames. Topics include:

•	Common uses for frames documents

•	Creating frames to define areas of the window.

•	Providing alternative pages.

•	Using the WYSIWYG-Frames view.

•	Targeting specific frames.

You can use frames to tell browsers to divide the window into multiple rectangular regions and display a different document or location in each region. You can also target frames (that is, use attributes to control which frame will display a linked document). HoTMetaL PRO provides a WYSIWYG Frames editing window for creating and formatting frames.

Note: Frames, while commonly used, are not part of the HTML 2.0 specification, and are not supported by all Web browsers. Use this feature with caution, and ensure that you have alternative pages for users of non-frame browsers and screen readers.

Note: Microsoft Internet Explorer must be installed on your PC in order for frame editing to be available.

  More on this topic


Common uses for frames documents

By default, any anchor (A) in a frame will load a document into that same frame. This is the simplest application of a frame set document. More commonly, frame set documents are used to create interactive web sites, where clicking on menu items in one frame window causes documents to appear in another. For example, many sites on the Web use frames to create:

•	Navigation bars – One frame displays a toolbar containing an image map or group of image anchors. Clicking on an image area causes content to display in another window (or windows).

•	Footnotes – Used for technical or scholarly documents containing definitions or quotes. At least one document window with content contains an anchor element that jumps to specific points in a second footnote document. Clicking on an anchor causes the linked reference to display.

•	Static title bar – A frame across the top of the browser window that keeps the title of the current document displayed can be combined with a navigation bar along the side that displays various portions of the document. This helps to orient the viewer, because the browser will show only the name of the frameset document in the title bar. An additional window below the main content frame could be used to display footnote information.

•	Progressive detail – In this frame structure, the frame set is divided into any number of frames, with anchor elements providing 'choices' in each frame window. Each choice made would load a document in the next frame in the hierarchy containing more choices, with progressive levels of detail added with each choice.


Creating documents with frames

A frame-based document has two components:

•	A frameset document that defines the frames.

•	The individual documents (or document locations) that are displayed in the frames. These documents are associated with frames using URLs.

If you are setting up a frames-based document you can also optionally do the following:

•	Supply some alternative content, in the frameset document, which will be displayed if the browser does not support frames.

•	Assign names to frames so that you can specify that a document accessed by a link will be displayed in a specific frame.

If your document already contains frames, skip to the Editing the frameset section below.

To create a new frameset document:

•	Choose New... in the File menu, then Frames Page from the fly-out menu, then choose one of the frame templates from the next fly-out menu.

Or:

•	Choose New... in the File menu, then Page From Template... from the fly-out menu.

•	Click on the Frames Pages tab.

•	Choose a template.

If none of the templates correspond to the frame structure you want, you can pick the closest one and modify it, or you can create a new document with a single frame and modify that document:

•	Choose New... in the File menu, then New Page from the fly-out menu.

•	Choose Convert to Frames in the Tools menu.

To convert an existing document to a frameset document:

•	Open an existing document.

•	Choose Convert to Frames in the Tools menu.

Convert to Frames creates an initial frameset containing a single frame. If the original document had any content, it will be moved to an element called NOFRAMES: the content of this element is the alternative content that will be displayed if a browser cannot display frames.

At this stage the frameset contains a single frame that has no content. If you want the original content of your document to be displayed in a frame, you have to save that content in a separate file and assign that file to a frame.

Editing the frameset

Now you should carry out the following steps:

1	Refine the frame structure using the WYSIWYG-Frames view. The Frames toolbar enables you to specify the number and size of the frames, make frames resizable by the browser, display scrollbars in frames, and turn frameset borders on and off.

2	Assign to each frame a document that will be loaded in that frame initially when the frameset document is displayed .

3	If desired, assign names to the frames  so that you can cause linked documents to be displayed in specific frames. If you do this, you also have to modify your links to refer to the desired frames.

4	If desired, insert some alternative content for non-frames browsers .

5	If you want to define  frame spacing you have to do so using attribute values .


Defining frames in the WYSIWYG:Frames view

Once your document contains a frameset, you can start editing it as a frameset document.

Frame editing is carried out with three components of the HoTMetaL PRO interface: the WYSIWYG-Frames view, the Frames toolbar, and the Frameset menu. The Frames toolbar contains buttons and fields for creating frames and setting options for the currently selected frame.

To open the WYSIWYG-Frames view:

•	Choose WYSIWYG:Frames from the View menu, or press Ctrl+Shift+F.

The WYSIWYG:Frames command is grayed out if the current document does not have a frameset.

The WYSIWYG-Frames view window represents the position and sizes of the frames in your frame document; you can add, delete, and resize frames in this area. If you click on a frame in the WYSIWYG-Frames view window, the properties of that frame are displayed in the Frames toolbar, and any changes you make from the toolbar are applied to that frame. The active frame has a blue border.

To move to the next frame or frameset in WYSIWYG-Frames view, press Tab; to move to the previous frame or frameset, press Shift+Tab.

Note: Microsoft Internet Explorer must be installed on your PC in order for the WYSIWYG:Frames view to be available.

To display the Frames toolbar:

•	Right-click on the background of the toolbar area to bring up the pop-up menu for toolbars.

•	If Frames is not turned on, turn it on to display the toolbar.

The Frameset menu offers all of the frame editing options. You can use this menu to edit the frame source, split the frame into columns and rows, delete frames, add scrollbars, toggle resizability, create borderless frames, refresh the display, and edit the frame's properties.

Note: You cannot switch directly from HTML Source view to WYSIWYG:Frames view; switch to WYSIWYG or Tags On view first, and then switch to WYSIWYG:Frames view.

  More on this topic


Creating frames

You can create more frame areas in WYSIWYG-Frames view in several different ways:

•	Choose WYSIWYG:Frames from the View menu, or press Ctrl+Shift+F.

•	Click on the [image] button to split the currently selected frame into rows, or click on the [image] button to split the selected frame into columns.

•	If you right-click on a frame, you can choose Split Frame into Columns or Split Frame into Rows from the pop-up menu.

•	 You can also choose Split Frame into Columns or Split Frame into Rows from the Frameset menu.

Each frame, when split, takes up half of the original frame's area.

To create custom-width frames, do one of the following:

•	Using your mouse, hover over the edge of the window until the cursor becomes a double-headed arrow, drag in the direction necessary to size the frame, then release the mouse button.

Or:

•	Create a new frame by splitting an existing frame, as described above.

•	Enter the desired frame size in the Size text box in the Frames toolbar, and press Enter.

The default size unit for new frames, as shown in the Size text box in the Frames toolbar, is '%' (percent), unless the new frame was created by splitting a frame whose size was expressed as an absolute number of pixels, or a proportional (*) size.


Resizing frames

When you create a frame or manipulate its size, frame size values are generated automatically (as a percentage of the document window size). You can also specify the size of a frame as an absolute (specific) number of screen pixels or as a proportional size.

To resize a frame:

•	Choose WYSIWYG:Frames from the View menu, or press Ctrl+Shift+F.

•	Click in the frame to make it active.

•	Enter a size in the Size text box in the Frames toolbar, and then press Enter.

Or:

•	Choose Frame Properties... from the Frameset menu, or right-click on the frame with your mouse and choose Frame Properties... from the pop-up menu. The Frame Properties dialog box appears.

•	Enter a size in the Size text box, and then click on OK.

Absolute pixel sizes are not usually a good idea, since the browser window size can vary on different platforms and monitor sizes. A proportional size is specified with an asterisk (for example, 1* or *, 2*, or 3*). These are interpreted as follows: after all widths, or heights, specified as percentages or absolute amounts have been allocated to the corresponding frames, the remaining space will be allocated to frames, proportionally. For example, suppose your document was viewed in a browser window 800 pixels high and you had four horizontal frames within one frameset with the following size values:

50%, 100, *, 2*

The first frame would be 50% of the total height (400 pixels); the second frame would be the specified 100 pixels. The remaining 300 pixels would be divided between the other two frames. The fourth frame's height (2*) is set to twice that of the third frame (*), so the third frame would be 100 pixels high and the fourth would be 200 pixels high.

Resizable frames

Click on the [image] button to enable the browser to allow a frame to be resizable.


Adding scrollbars to frames

Frames can have scrollbars, no scrollbars, or you can tell the browser to add scrollbars automatically if the document in the frame is larger than the display size of the frame. Use the scrollbar buttons in the Frames toolbar to add or remove scrollbars (the default setting is to have scrollbars as needed).

To set the scrollbar options:

•	Choose WYSIWYG:Frames from the View menu, or press Ctrl+Shift+F.

•	Click on the appropriate frame in the WYSIWYG-Frames view window.

•	To always have scrollbars, do one of of the following: click on the [image] button; right-click with your mouse on the frame and choose Scrollbars - Always from the pop-up menu; or choose Always from the Scrollbars fly-out menu in the Frameset menu.

•	To never have scrollbars, do one of of the following: click on the [image] button; right-click with your mouse on the frame and choose Scrollbars - Never from the pop-up menu; or choose Never from the Scrollbars fly-out menu in the Frameset menu..

•	To have the browser add scrollbars as needed, do one of of the following: click on the [image] button; right-click with your mouse on the frame and choose Scrollbars - Automatic from the pop-up menu; or choose Automatic from the Scrollbars fly-out menu in the Frameset menu.


Borderless frames

You can create borderless frames. This option makes all frames in the document appear without boundaries (borders).

To create borderless frames

•	Choose WYSIWYG:Frames from the View menu, or press Ctrl+Shift+F.

•	Do one of the following:

•	Click on the [image] button from the Frames toolbar.

•	Right-click and choose Borderless Frames from the pop-up menu.

•	Choose Borderless Frames from the Frameset menu.

The frame borders in the WYSIWYG-Frames view window disappear.

To restore the frame borders, de-select Borderless Frames from the pop-up menu.


Deleting frames

There are several ways that you can delete a frame from the WYSIWYG-Frames view window.

To delete a frame:

•	Choose WYSIWYG:Frames from the View menu, or press Ctrl+Shift+F.

•	Click in the frame in the WYSIWYG-Frames view window.

•	Do one of the following:

•	Click on the [image] button in the toolbar.

•	Right-click inside the frame and choose Delete Frame from the pop-up menu.

•	Choose Delete Frame from the Frameset menu.


Frame templates

HoTMetaL PRO provides frame templates that you can use to create new frame documents. The templates include some basic and commonly used frame layouts for Web pages. To use a frame template for your document:

•	Choose New... from the File menu.

•	Choose a frame template from the Frames Page fly-out menu.

The icon beside each frame template displays what the frames look like. Headers and footers are typically used to hold a logo or banner. The contents area may hold a table of contents, index, or the main content of the Web page. The available frame templates are:

•	 – Header and Contents

•	 – Contents

•	 – Footer

•	 – Header

•	 – Header, Footer and Contents

•	 – Header and Footer

After you have chosen a frame template from the fly-out menu, the WYSIWYG-Frames view window will display the frame template. Now you can use this view to specify the default controls, resize the frames, and do other frame editing.


Assigning a document to a frame

A frame will generally have a default document that is displayed in the frame when the frame document is initially loaded in the browser. The contents of a frame may change during a browsing session if the viewer clicks on a link that is targeted at that frame. If you do not specify a default document for a frame, it may be displayed as a blank area in the browser.

To specify the default document for a frame in the WYSIWYG-Frames view:

•	Choose WYSIWYG:Frames from the View menu, or press Ctrl+Shift+F.

•	Click on the frame to select it.

•	Choose Frame Properties... from the Frameset menu, or right-click on the frame and choose Frame Properties... from the pop-up menu. The Frame Properties dialog box appears.

•	Enter the URL for the document in the Source text box, either by typing it directly or by clicking on the Browse... button and selecting the file.

Dragging and dropping files onto a frame

You can also drag and drop files onto a frame. If the frameset document has been saved at least once, the URL of the dropped file will be relative to the location of the frameset document; if the frameset document has never been saved, the URL will be a full path. You can also drag and drop files from the Assets tab or Desktop tab in the Resource Manager, or from the Thumbnail View, onto a frame.

You can also use the SRC attribute of a FRAME element to specify the default document displayed in a frame:

•	Click in the frame in WYSIWYG-Frames view.

•	Choose Attribute Inspector from the View menu, or press F6.

•	Enter the URL for the default document in the SRC field, either by typing it directly or by clicking on the ... button and choosing the file.

•	Close the Attribute Inspector.


Editing a document in a frame

After you have supplied a source URL for a frame, you can edit the frame content. To edit the content of a frame in WYSIWYG-Frames view, do one of the following:

•	Choose WYSIWYG:Frames from the View menu, or press Ctrl+Shift+F.

•	Double-click in the frame.

•	Click in the frame and choose Edit Frame Contents from the Frameset menu.

•	Right-click in the frame and choose Edit Frame Contents from the pop-up menu.

The document will open in your default HoTMetaL PRO document view.


Copying frame properties

You can drag and drop frame properties, including source URLs, between frames in WYSIWYG-Frames view:

•	Choose WYSIWYG:Frames from the View menu, or press Ctrl+Shift+F.

•	To copy one frame's properties—including its source URL—to another frame, hold down the Ctrl key, click and hold down the mouse button in the first frame, then drag and release in the second frame.

•	To swap the properties—including source URLs—of two frames, hold down the Shift key, click and hold down the mouse button in one frame, then drag and release in the second frame.

•	To move one frame's properties—including its source URL—to another frame, click and hold down the mouse button in the first frame, then drag and release in the second frame.


Refreshing the contents

The Refresh command in the Frameset updates the WYSIWYG-Frames view after a frame's content has changed.

•	Click in the frame whose content you want to edit.

•	Choose Edit Frame Contents from the Frameset menu, or right-click and choose Edit Frame Contents from the pop-up menu. The document opens in the HoTMetaL PRO document window.

•	Make any changes needed to the document.

•	Save your document.

•	Choose WYSIWYG:Frames from the View menu, or press Ctrl+Shift+F.

•	Choose Refresh from the Frameset menu, or right click and choose Refresh from the pop-up menu.

The WYSIWYG document display is updated with the current contents of the document you just edited.

To stop a frame's source document from loading, or a Web object (such as an animated GIF, or a JavaScript) from playing in the WYSIWYG:Frames view:

•	Choose Stop from the Frameset menu, or right-click and choose Stop from the pop-up menu.

This is useful if the playing or loading of an object would be distracting or time-consuming.


Loading linked documents in specific frames

By default, if you click on a link in a document displayed in a frame, the linked document will be displayed in that same frame. To have a document referred to by a link display in a specific frame (called the target frame), do the following:

1	Give the frame a name.

2	Modify the link to refer to that frame name.

Assign a frame name

To give a frame a name:

•	Choose WYSIWYG:Frames from the View menu, or press Ctrl+Shift+F.

•	Click on the frame to make it active.

•	Choose Frame Properties... from the Frameset menu, or right-click on the frame and choose Frame Properties... from the pop-up menu.

•	Enter the name in the Name text box.

Or:

•	Switch to Tags On view.

•	Put the insertion point inside the FRAME element corresponding to the frame.

•	Choose Attribute Inspector from the View menu, or press F6.

•	Enter the name in the NAME field.

Referring to a frame name

To specify which frame a linked document will be displayed in:

•	Put the insertion point inside the hot text for that link.

•	Choose Link... from the Insert menu.

•	Enter the frame name in the Target frame text box.

•	Click on OK.

Or:

•	Put the insertion point inside the link.

•	Choose Attribute Inspector from the View menu, or press F6.

•	Enter the frame name in the TARGET field.

When you click on the link in a browser, the document will be opened in the specified frame if that frame exists, otherwise, a new window will be created.

Special link targets

The following names have special meanings when used as link targets (notice that each of them starts with an underscore):

•	_self: the document will be opened in the frame containing the link.

•	_top: the document will be opened in the full browser window (if the window has been divided into frames, it will become a single pane again).

•	_blank: the document will be opened in a new window.

•	_parent: the parent frame set of the current frame will become a single frame, and the document will be displayed there.

  More on this topic


Example of loading documents in specific frames

Here is an example of targeting specific frames using an anchor element.

<FRAMESET ROWS="33%,33%,33%">

 <FRAME NAME="upper" SRC="blue.htm">

 <FRAME NAME="middle" SRC="sources.htm">

 <FRAME NAME="lower" SRC="blue.htm">

</FRAMESET>

To create this document:

•	Create a new document and choose Convert to Frames from the Tools menu.

•	Choose WYSIWYG:Frames from the View menu, or press Ctrl+Shift+F.

•	In WYSIWYG-Frame view, create the three frames.

•	Click in each frame, choose Frame Properties... from the Frameset menu and enter the appropriate name: upper, middle, or lower in the Name text box.

•	For the middle frame, choose Frame Properties... from the Frameset menu and enter sources.htm in the Source text box; for the top and middle frames, enter blue.htm in the Source text box.

Here is a fragment from the document sources.htm.

<P>

<A TARGET="upper" HREF=http://www.sq.com/">

SoftQuad Home Page

</A>

<A TARGET="lower" HREF=http://www.w3.org/">

W3 Consortium Home Page

</A></P>

To create this document:

•	Create a new document.

•	Choose Link... from the Insert menu. The Insert Link dialog appears.

•	Type http://www.sq.com/ in the File or URL text box and upper (the name of the first frame) in the Target frame text box.

•	Insert a second anchor and give it the URL http://www.w3.org/ and the target frame lower.

•	Type the link text inside each anchor.

Since each frame should have a default document, create a file called blue.htm that has no content, but has the document background color set to blue.

When you load the frame document in a browser, three frames are displayed. The middle frame contains the document sources.htm, and the other two frames are blue blanks. Clicking on the first anchor will cause the document http://www.sq.com/ to be displayed in the upper frame; clicking on the second anchor will cause the document http://www.w3.org/ to be displayed in the lower frame.


Frame spacing

The value of the FRAMESPACING attribute of a FRAMESET inserts additional space (in pixels) between all the frames in that frameset.

Frame spacing properties can't be set directly from the WYSIWYG-Frames view; to set these, use the Attribute Inspector:

•	Choose WYSIWYG:Frames from the View menu, or press Ctrl+Shift+F.

•	Click in any frame in the frameset in WYSIWYG-Frames view.

•	Choose Attribute Inspector from the View menu, or press F6.

•	Choose FRAMESET from the drop-down list of elements.

•	Click on the All tab.

•	Enter a value (the number of extra pixels between frames) in the FRAMESPACING field.


Using both rows and columns in a frameset

If your document contains a FRAMESET that has values for both the ROWS and COLS attributes, you cannot edit it in WYSIWYG-Frames view. In this case, you can manually convert it to an equivalent form using nested FRAMESETs with either ROWS or COLS, but not both, using the following procedure:

•	Switch to Tags On view.

•	Using the Attribute Inspector, make note of and then delete the COLS attribute value of the FRAMESET.

•	Use the Element... command in the Insert menu to surround the FRAME elements corresponding to each row with a FRAMESET element. For example, if the original FRAMESET contains 6 FRAMEs, and you want them to display in 3 rows, surround the first two FRAMEs with a FRAMESET, then the next two, and the last two.

•	Using the Attribute Inspector, give each of the new FRAMESETs the same COLS attribute value that the original FRAMESET had. (In our example, there would be attribute values for 2 columns.)

If you need more information about the HTML markup in a frameset document, see  The HTML behind the frames.


Adding alternative content

Since some browsers do not support frames, it is generally a good idea to provide alternative content that can be displayed in a non-frames browser.

Alternative content is contained in the NOFRAMES element; if present, this element is the last element in the outermost FRAMESET element in the document. NOFRAMES contains a BODY element, and therefore can contain any markup or content that you like.

If you use Convert to Frames to create the initial frameset, a NOFRAMES element will be inserted automatically. If the document contains any content when you perform the conversion, it will be placed inside the NOFRAMES element.

If a frame document is viewed by a browser that does not support frames, the browser will display only the content inside the NOFRAMES element. A browser that recognizes the FRAMESET element will ignore all content contained in the NOFRAMES element.

Note: the HoTMetaL PRO rules also allow the element 'NOFRAME' (with no 's'), because some sources appear to use this spelling of the element name. 'NOFRAMES' is more common.


The HTML behind the frames

HTML documents usually contain a BODY element as the top-level document content element. A document that contains frames begins with a FRAMESET element instead of a BODY element. A frameset divides the browser window into rectangular regions. Each of the regions can be:

•	A frame, which displays one document. A frame is represented by a FRAME element. The SRC attribute for the frame specifies the default content of the frame.

•	Another frame set, which is divided into frames.

For example, a frame set can contain a frame, plus another frame set containing two frames, resulting in three frames in all.

A frame document should also contain a NOFRAMES area, which itself contains a BODY element. The NOFRAMES element follows the FRAMESET element.

Browsers automatically ignore unrecognized markup and display only what they recognize, so if a frame document is viewed by a browser that does not support frames, the browser will display only what is recognized: the content inside the BODY element. Conversely, a browser that recognizes the FRAMESET element will ignore all content contained in the NOFRAMES element.

Note: the HoTMetaL PRO rules also allow the element 'NOFRAME' (with no 's'), because some sources appear to use this spelling of the element name. 'NOFRAMES' is more common.

The attributes of a frame determine its contents and appearance.

  More on this topic


Frame attributes

The frame properties that you can set in WYSIWYG-Frames view correspond to attributes of the FRAME and FRAMESET elements. To edit these attributes, put the insertion point inside the appropriate element and choose Attribute Inspector in the View menu, or press F6.

FRAMESET attributes

 A FRAMESET has COLS (columns) and ROWS attributes. These attribute names emphasize that a frame set can be thought of as a table or grid. These attributes may be blank, or consist of a list of one or more values separated by commas. Each such value determines the width (for columns) and height (for rows) of the regions; the number of width and height values supplied determines how many rows and columns, respectively, are created. The default for each is one. For example, if you set COLS to:

20%,30%,50%

and don't supply a value for ROWS, the frame set will be divided vertically into three regions: the first region's width will be 20% of the current frame set (or browser window if this frame set is at the top level), the second region's width will be 30%, and the third region's width will be 50%. If there is only one frame set in the document, these widths will apply to the entire browser window. Similarly, if you supply a value only for ROWS, the frame set will be divided horizontally into regions. If you supply values for both attributes, the frame set will be divided into a grid of rows and columns. However, WYSIWYG-Frames view supports FRAMESETs with either COLS or ROWS, but not both in the same FRAMESET. If your document has a FRAMESET with both attributes, you can convert it into an equivalent form that uses only one of these.

If you turn borderless frames on or off, HoTMetaL PRO sets the FRAMEBORDER attribute of FRAMESET to 1 or 0, respectively.

The FRAMESPACING attribute of FRAMESET specifies extra space between frames (in pixels).

FRAME attributes

Frame editing in the WYSIWYG-Frame view sets the following attributes of FRAME elements:

•	The SRC attribute specifies the default document to be displayed in the frame.

•	The NAME attribute is used for targeting specific frames.

•	The MARGINWIDTH attribute sets the width of the frame margin in pixels.

•	The MARGINHEIGHT attribute sets the height of the frame margin in pixels.

•	SCROLLING can have any of following values: YES, NO, and AUTO. The default is AUTO.

•	The default value for NORESIZE is NORESIZE. Remove the NORESIZE value to make the frame resizable.

Both FRAME and FRAMESET have other attributes that specify properties that can't be set from WYSIWYG-Frames view.


Using floating frames

HoTMetaL PRO also supports the IFRAME element, used by Microsoft Internet Explorer. This element is used to create 'floating' or 'in-line' frames that display in the browser window much as an image would.

To insert this element, choose Element... from the Insert menu, and select IFRAME.

This type of frame cannot be edited using the WYSIWYG-Frames view; use the Attribute Inspector to set any of the following attributes:

•	ALIGN – Sets the alignment of the frame or the surrounding text. The default value is LEFT.

•	FRAMEBORDER – Determines whether the floating or in-line frame will have a border. Values are 1 to give the frame a border and 0 for no border.

•	HEIGHT – The height of the frame in pixels.

•	MARGINWIDTH – The width of the left and right margins (in pixels).

•	MARGINHEIGHT – The height of the top and bottom margins (in pixels).

•	NAME – The target name for the frame. The default is none. Reserved names begin with an underscore (_).

•	NORESIZE – If the default value, NORESIZE, is included, the frame can't be resized by dragging the frame border in the browser window. Remove the NORESIZE value to make the frame resizable.

•	SCROLLING – Specifies whether the frame will always have scrollbars (YES), never have scrollbars (NO), or have scrollbars added by the browser if necessary (AUTO). The default is AUTO.


Maintaining your Website

HoTMetaL PRO has powerful site management functions for finding and replacing text across an entire site, finding orphan files, finding broken links, and finding external broken links. You can repair broken links with the Site Doctor. You can also group user-selected files into Pockets and perform further operations on them.

This chapter discusses:

•	Finding and replacing:

•	Finding text.

•	Finding tags.

•	Finding meta-data.

•	Using pockets to manage files.

•	Using the Site Doctor:

•	Finding broken links.

•	Fixing broken links.

•	Checking external links.

•	Finding orphan files.

•	Using the Site Summary.

  More on this topic


Finding and replacing

One of the site management functions is a powerful search engine that lets you search an entire project for files containing particular text, and replace that text, if you wish. You can also find or replace HTML elements or attributes, or special header elements (META elements), which describe your document. The Find and Replace dialog box has four different tabbed sections—Text, Tag, Meta, and URL. The four tabs all work slightly differently, and are discussed in the following sections.

  More on this topic


Finding text

To find text in your project files:

•	Start HoTMetaL PRO.

•	Click on the [image] button from the Standard toolbar to open the Resource Manager, if it isn't open already. The Resource Manager opens.

•	Open a project. The Project tab in the Resource Manager appears.

•	Choose Web View or Page Links from the View menu, if they aren't visible already, to view the files in your project.

•	Choose Find in Files... from the Edit menu or click on the [image] button from the Standard toolbar.

The Find dialog box appears.

To perform a simple search, select the Text tab and enter the text that you want to find in the Find what text box. The last five searches that you made are available from the drop-down list.

Find and Replace options

There are several different ways to choose which files you would like to search in a project; from the list labeled Search, you can choose:

•	Project (all files) – search in the entire project.

•	 Site (linked files) – search those files that are linked from the home page (that is, orphan files will not be searched).

•	Selected File(s) – search only the files that are selected in the project. You can select files in the site management windows in the same way that you would in Windows: clicking on a file selects it, holding down the Ctrl key and clicking on a file adds it to the selection, and holding down the Shift key and clicking on a file in a list adds all the files from that point to the next or previous selected file in the list.

In addition to these options, you can Find whole words only, Match case, Use pattern matching, and Include Tag Text. You can use the same search patterns as you would in the HoTMetaL PRO document window: see Using search patterns for more information.

Using the Include Tag Text option, you can find raw HTML text by typing the tags in text form. This option is more flexible than the Finding tags method, because you can find combinations of tags. For example, if you want to find instances where a <P> is preceded by an <HR> tag, you would use <HR><P> as your search string.


Finding tags

The Tag tab of the Find dialog box lets you search for particular HTML tags (elements) across a project or in selected files.

You can search for an HTML element (no matter what attribute it has), or an element, attribute, and attribute value combination.

To find an element:

•	Choose an HTML element from the Element list or type the element name in the text box.

 Once you have selected an element, the list of possible attributes for that element appears in the Attribute pull-down list.

To search for an attribute:

•	Choose an HTML attribute from the Attribute list or type the attribute name in the text box.

If you haven't selected an element, no list of attributes will appear; you must select a particular element to perform a search.

To search for a particular attribute value, enter it in the Attribute Value text box.

For example, suppose you wanted to search for all instances of H1 that are center-aligned. Center-aligned headers (and all other block elements) have the attribute ALIGN with the value CENTER.

•	In the Tag tab of the Find  dialog box, choose h1 from the Elements drop-down list.

Once you have made the element selection, a list of possible attributes for the H1 element will appear in the Attribute drop-down list.

•	Choose align from the Attribute drop-down list.

•	Type center in the Attribute Value text box.

•	Click on Find to start the search.

The results of your search are displayed in the Find Results dialog box. It displays the files that contain the searched for element and the number of occurrences in each file.


Finding meta-data (META elements)

The Meta tab of the Find dialog box lets you search for meta-data (META tags) with particular values for the NAME and CONTENT attributes, across a project or in selected files.

Meta-data is used to embed document meta-information; that is, information about the document. Meta-data is contained in the HEAD element as attributes and values of META elements. This kind of information is used by servers or browsers and is application and user specific; that is, meta-data is not found in all documents and there's no general agreement on the types of meta-data in common use. Some browsers use meta-data (for example, Netscape has an extension that allows a client-pull, where you set a page to load for a specified amount of time, then load another page). It's also used to index pages for many search engines.

Often, meta-data is specified by means of a META element's NAME and CONTENT attributes. The NAME defines what type of information is being specified, and the actual content is described in the CONTENT attribute. For example, a META element that describes the version number of a document might have its NAME attribute specified as VERSION and the CONTENT specified as 1.55.

For example, suppose your project contains META specifications for document authors, and you wanted to search for all files written by a specific author.

•	In the Meta tab of the Find  dialog box, type Author in the Name  text box.

•	Type the desired author name in the Content text box.

•	Click on Find to search.

You can specify the search options for finding META in the same way that you can for finding text. See  Find and replace options for details.


Finding URLs

The URL tab of the Find dialog box lets you search in URLs across a project or in selected files. This is different from the Find Text option because it looks only in attributes, not text and it's restricted to attributes that correspond to URLs (such as HREF of A, SRC of IMG).

To search in a URL:

•	Type the search text in the text box.

•	Select which files you want to search from the Search text box: Selected files only, Site (linked files), or Project (all files).

•	Click on the Find button.

•	The Find Results dialog box will appear, displaying the search results.

•	You can choose to put the found URL file(s) into a pocket folder for working on later.


Find results

Once you have completed a search of any type, the Find Results dialog box will appear with your search results. If your search did not return any files, a dialog box will appear informing you of that.

The Find Results dialog box shows a list of Filenames  and the Number of occurrences in each file of what you are searching for. You can resize the columns by dragging the divider between the column titles. You can group all the files that you have found into a Pocket and perform further operations on them by clicking on Save in Pocket. See Using Pockets to manage files for more information on Pocket operations.


Replacing text, tags, meta-data, and URLs

The Replace in Files... functionality is very similar to the Find in Files... functionality, except that you must fill in the replacement text, tags, or attribute values in the Text, Tag, Meta, or URL sections of the Find and Replace dialog box. Refer to Other replace result operations  for information on other operations you can perform on replace results.

  More on this topic


Replacing text

To replace text:

•	Choose Replace in Files... from the Edit menu.

•	Click on the Text tab of the Replace dialog, if it isn't selected.

•	Enter the text you wish to find in the Find what text box.

•	Now, enter the replacement text in the Replace with text box.

•	Make any selection of options from the Search section of the dialog (see  Find and replace options  for details).

•	Click on Find to perform the search.

The Replace Results dialog box appears, showing the files that have the text you searched for.

•	Click on Replace All... to replace the found text with the replacement text.

You can replace text in tags by checking the Text in Tags box. This means that you can replace raw HTML tag text in one or more files. This feature is a powerful way to replace tags that is not available from the Tags tab described below. For example, you may want to add a horizontal rule above all of the block quotations in a series of documents. To do this, you replace the text <BLOCKQUOTE> with <HR WIDTH="90%"><BLOCKQUOTE> in the Text tab of the dialog using the Text in Tags feature.


Replacing tags

To replace tags:

•	Choose Replace in Files... from the Edit menu.

•	Click on the Tag tab of the Replace dialog if it isn't selected.

•	Choose a tag, and if desired, an attribute name and value that you wish to find from the Element and Attribute drop-down lists, and the Attribute value text box.

•	Now, choose the replacement element, attribute, and attribute values in the Replace with section.

Note: You can leave the attribute and value blank in the 'find' tag; this matches all tags of the specified type.

•	Make any selection of options from the Search section of the dialog (see  Find and replace options for details).

•	Click on Find to perform the search.

The Replace Results dialog box appears, showing the files that have the tags you searched for.

•	Click on Replace All to replace the tags you searched for with the tags you chose to replace them with.

Note: Tag replacing should be used with caution: you could create invalid HTML if you replace a HTML element with an element that isn't allowed in that context. Using tag replacing to replace elements of the same type—for example, replacing 'H1' with 'H3' or replacing 'P' with 'DIV'—is safest.


Replacing meta-data

You can find and replace the NAME and CONTENT attributes of meta data (META tags) from the Meta tab of the Replace dialog box.

To replace meta-data:

•	Choose Replace in Files... from the Edit menu.

•	Click on the Meta tab of the Replace dialog if it is not selected.

•	Enter the meta-data Name and Content in the Find what section.

•	Now, enter the replacement Name and Content in the Replace with section.

•	Make any selection of options from the Search section of the dialog (see  Find and replace options  for details).

•	Click on Find to perform the search.

The Replace Results dialog box appears, showing the files that have the META elements you searched for.

•	Click on Replace All to replace the meta-data Name and Content with the values you have chosen.


Replacing URLs

To replace text in URLs:

•	Choose Replace in Files... from the Edit menu.

•	Click on the URL tab of the Replace dialog, if it isn't selected.

•	Enter the text you wish to find in the Find what text box.

•	Now, enter the replacement text in the Replace with text box.

•	Make any selection of options from the Search section of the dialog (see  Find and replace options  for details).

•	Click on Find to perform the search.

The Replace Results dialog box appears, showing the files that have the text you searched for.

•	Click on Replace All... to replace the found text with the replacement text.


Other replace result operations

From the Find and Replace Results dialog, you can choose to edit any of the files you have found or Pocket the find results without doing the replace.

To group all the files that you have found into a Pocket (and perform further operations on them), click on Save in Pocket. See Using Pockets to manage files for Pocket operations.

To edit any of the files that you have selected during the 'Find' part of the Replace in Files... operation, click on the file in the Replace Results dialog to select it, and then click on Edit File.... HoTMetaL PRO is launched with the file that you chose. (This may be useful if you want to do a more specific step-by-step find and replace within the document using HoTMetaL PRO. See Searching and replacing .)


Using Pockets to manage files

Pockets—user-defined sets of files—are useful for managing projects. Pockets can help you delete, copy, or rename selected files as a group, rather than trying to find each file one-by-one in the Project tab, Web View or Page Links window. You can create Pockets based on a variety of criteria, such as search results, files with broken links, orphan files (files without any links to them), etc. See Finding and Replacing  and Repairing links with the Site Doctor for details.

To open the Pocket View window, choose Pocket View from the View menu or click on the [image] button from the Views toolbar.

You can create pockets by selecting one or more files in the Project tab, Web View, or Page Links window and dragging them into the Pocket View window. The default name for Pockets you create by dragging is New Pocket, but you can edit the name of the Pocket.

Once you have created a Pocket, you can then select one or more files in the Pocket and:

•	Delete the files.

•	Copy the files.

•	Launch HoTMetaL PRO (all selected files will be loaded).

•	Do  find and replace operations on the selected files (turn on Selected File(s) in the Find and Replace dialog).

Pockets are associated with specific projects, so they will disappear from the Pocket window if you display a different project. Pockets are saved between HoTMetaL PRO sessions. You can show or hide the files in a Pocket by clicking on the [image] icon to the left of the Pocket.

If you right-click on the Pocket window, you get a list of commands such as Edit File, View in Browser, Properties, Remove From Pocket, Font..., etc., which are common to all panels. See Window commands for details.

To add files to a Pocket:

•	Drag selected files from the Project tab, Page Links window or Web View window and drop them on an existing Pocket.

Note: If you drag a folder into a Pocket, the Pocket will contain only the files that are in the folder, and not the folder itself, any subfolders, or files within subfolders.

To rename Pockets:

•	Click on a Pocket once to select it and then click a second time, or right-click on the Pocket name and choose Rename Pocket from the pop-up menu. The name of the Pocket will become editable.

•	Enter a new name. When you click outside the Pocket, or press Enter, the name change takes effect.

To remove files from a Pocket:

•	Select the files, right-click on the selection and choose Remove From Pocket from the pop-up menu.

 This does not delete the file; it just removes the file from the Pocket. To actually delete the file (that is, send it to the Recycle Bin), choose Delete from the Edit menu or right-click on the Project panel and choose Delete from the pop-up menu.

To delete a Pocket:

•	Right-click on the Pocket and choose Delete Pocket from the pop-up menu.

Deleting a pocket does not delete the files it contains from your hard disk.


Repairing links with the Site Doctor

The Site Doctor helps you find problems in your site and repair them quickly and easily. The Site Doctor appears when you move a file around in a project, and asks if you want to repair links to that file. Additionally, there are three more commands that launch the Site Doctor. These commands let you find:

•	Files with broken links .

•	Files with broken links to external files.

•	Orphan files (that is, files that can't be reached by following links outward from the home page of the project—files that are not part of the link structure of the project).

  More on this topic


Finding broken links

A broken link is a link that points to a file that does not exist in the specified location. Users will not be able to navigate broken links; their Web browsers will return error messages when the page cannot be found. The site management functions enable you to fix the broken links and make sure that they point to pages that actually exist. To find broken links, choose Broken Links from the Project menu. The Site Doctor displays a list of broken links (if there are any) in your project.

From this dialog box, you can:

•	Go to the Site Doctor's Fix broken links dialog by double-clicking on the broken link. This lets you change the link so that it points to an existing file.

•	Put the broken links into a Pocket, by clicking on Put in Pocket. You can perform further operations on the broken links once they are pocketed.


Fixing broken links

Broken links are links that point to files that don't exist. This can happen if files are moved around without fixing links, for example. Broken links are displayed in the Web View window as file names shown in red, and in the Page Links window they have a red arrow pointing towards them with two vertical wavy lines ( [image] ).

You can launch the Fix Broken Links Site Doctor from the Find Broken Links dialog, or by right-clicking on a broken link in the Pocket View, Web View, or Page Links window, and choosing Fix Broken Link from the pop-up menu. The Site Doctor - Fix Broken Links dialog appears.

The upper part of the Fix Broken Links dialog shows a list of files that contain the broken link. You can correct the broken link by typing in the correct path in the text box provided (you can type in either a relative or an absolute URL), or you can select a file by clicking on Browse....

Click on Fix to change the broken links to the link that you have specified. If the replacement link does not point to an existing file, a warning dialog appears and you will be asked to specify an existing file. Clicking on Cancel closes the dialog without fixing any links.


External links

An external link is a link outside of your project; for example, a link to a page on the World Wide Web. These kinds of links are usually specified by a URL of the form http://... (ftp links are not checked). HoTMetaL PRO can check external links to find whether they are valid; that is, whether the links refer to 'live' locations on the Internet.

Links to files that are on your local drive but outside your project are also treated as external links (that is, URLs that start with file:/// or relative URLs that point to a file outside the current project; for example, ../../../scratch.htm). HoTMetaL PRO does not validate these types of links when you choose External links from the Project menu.

To check external links on your site, choose External Links from the Project menu. The Site Doctor starts searching the World Wide Web to resolve the external links in your project. When the checking is finished, the Site Doctor - External Links dialog box appears.

From this dialog box, you can choose to Pocket all the files containing external links, or Pocket only the files containing broken external links. You can edit those files to remove the broken links, delete them, etc. Clicking on Stop stops the search that is in progress and returns the current results.


Finding orphan files

Orphan files are files that are in the project folder, but not part of the link structure of the project. Sometimes that's because all the links leading to them are broken, in which case it's a good idea to keep those orphan files around, and sometimes the links to them have been removed, in which case the files can be safely deleted, since they aren't part of the project anymore.

To find orphan files in a project (that is, files that are in the project folder but aren't part of the link structure of the project).

•	Choose Orphan Files from the Project menu.

The Site Doctor - Find Orphan Files dialog appears.

Clicking on Put in Pocket creates a Pocket called Orphan Files containing the results of the search.

Files that are referred to only in a JavaScript statement in a URL will be regarded as orphan files. A workaround to prevent this is, for each such file, to insert a LINK tag in the document's HEAD that makes a reference to that file. For example:

<LINK HREF="UpMouseLogo.jpg">


Project summary

You can get a summary of your project by choosing Summary from the Project menu. The Project Summary dialog box appears.

The Project Summary dialog box has several columns. You can change the size of any of the columns by dragging the borders between the column titles. You can resize the dialog box by dragging the resize corner in the lower right corner of the dialog box. Click on OK to dismiss the dialog box.

You can see the file names and their titles in the Path and Title columns. The registered Windows type is displayed in the Type column, and the size of the file is shown in the Size column.

The Links From and Links To columns show the number of links into and out of the file, respectively. Images shows the number of images linked to the file. Download Time shows the number of seconds it would take to download this file at 28.8K bps rates (a standard high-speed modem).

You can sort the summary by any of these characteristics: click on a column title to sort and reverse the sort by clicking again. For example, if you click on the Size column title, the files will be sorted from smallest to largest. Clicking on the column title again sorts the files from largest to smallest.

The Refresh button refreshes the Project Summary to take any new changes into account.

The Auto Sort button automatically sorts the files into categories. For example, all image files are sorted together (GIF, JPEG, etc.), all web documents are sorted together (htm, html, etc.), all project files are sorted together (hpp, hmp), and text documents are sorted together (doc, etc.). Other recognized file types are: .jpg, .ppt, .xls, and .css.

The Sort by Extension button sorts the files in alphabetical order by extension type.

You can choose which columns to be displayed in the Project Summary dialog box by clicking on one or more check boxes under Columns Shown.

Show Orphan Files includes orphan files in the site summary.

Turn Show Options on or off in the Site Summary window's Summary menu to show or hide the controls for these various options.

Saving the Project Summary

You can save the project summary as an HTML file or as a text file.

Choose Save As HTML... from the Site Summary window's Summary menu to save the project summary as an HTML file.

Choose Save As Text... to save the project summary as a text file.

Before you save a text file, you can choose from three possible text formats by choosing Save Options: Comma Separated and Tab Separated separate fields with commas and tabs, respectively; Fixed Field uses tabs to line up columns vertically.


Objects, applets, and scripts

 HoTMetaL PRO provides support for applets, scripts, ActiveX controls, and Dynamic HTML code that can be inserted into your Web pages quickly and easily. This chapter gives you an overview of how to insert and use these objects.

•	Applets – Programs written using the Java language. They are linked to a document, much like images.

•	ActiveX™ Controls – Programs conforming to the Microsoft ActiveX standard that are registered on your PC and are only downloaded over the Internet when needed. (Unlike applets, if you already have the ActiveX program on your computer that is being requested in a Web page, there's no need to download a new copy, since the current copy will run on your PC.)

•	Scripts – Programs that run in your browser when your Web page is loaded. These are generally written in JavaScript or VBScript. Scripts are usually embedded directly in a page; they are also interpreted, and do not need to be compiled (unlike ActiveX Controls and Java applets).

•	 Dynamic  HTML – Can refer to many different things, but in this chapter, it refers to the combination of scripts and the ability of Microsoft Internet Explorer 4.0 to render HTML elements. These scripts change the way that HTML elements in a Web page are displayed; that is, you can directly affect the display of HTML elements with a script. While most Web browsers do render HTML dynamically to some extent, the current Microsoft browser has more dynamic rendering capabilities. You can insert dynamic HTML in HoTMetaL PRO using Design-Time Controls.

Creating applets, scripts, ActiveX, Dynamic HTML and Design-Time Controls is beyond the scope of this manual.

  More on this topic


Using the Resource Manager

The Resource Manager is a quick way to insert scripts, applets, and Dynamic HTML into your document. When you insert one of these from the Resource Manager, a Design-Time Control will be launched, enabling you to configure the script, applet, or Dynamic HTML script. For more information on Design-Time Controls, see Inserting Design-Time Controls.

To drag and drop applets, scripts, or dynamic HTML from the Resource Manager:

•	Insert the HoTMetaL PRO CD in the CD drive.

•	Choose Resource Manager from the View menu.

•	Click on the Assets tab.You can choose scripts, applets, or dynamic HTML from the remote, hmfx, or cdrom folders.

•	Navigate to the folder containing the applet, script, or dynamic HTML code that you want to insert into your Web page. Each object is visible in the contents ( bottom) pane.

•	Drag the object in the contents pane to the HoTMetaL PRO document window.

The object that you selected will be inserted, and, if applicable, a DTC will be launched, so that you can configure the object.


Inserting Design-Time Controls

A Design-Time Control (DTC) is an ActiveX control that lets you configure the content of your page or an object of some type that is embedded in the page. DTCs are often used for configuring HTML, applets, and scripts in Web pages, they can also be created for more general purposes.

When you insert a DTC with HoTMetaL PRO, two things are inserted in your page:

1	The object or markup that the DTC configures.

2	Some code referring to the DTC itself, so that you can open it at a later time to reconfigure the object that was inserted. (This code is displayed only in HTML Source view.)

To insert a Design-Time Control in your document:

•	Choose Design Time Control... from the Insert menu, or click on the [image] button in the Advanced toolbar.

A dialog box that lists the Design-Time Controls registered on your system appears. This list will have content only if one or more DTCs are registered.

•	Double-click on a control in the list, or select a control and click on Insert.

A dialog box in which you can configure the applet, script, or Dynamic HTML code will appear. For some DTCs, a Properties dialog will automatically appear when you insert them. For other DTCs, you may need to right-click on the DTC and choose DTC Properties from the pop-up menu when you insert to access the DTC's Properties dialog.

If a DTC has been inserted into your document, you can re-open the Properties dialog for the DTC at any time.

To re-open the DTC Properties dialog:

•	 Select the object or code inserted by the DTC and choose Design Time Control... from the Insert menu, or right-click inside the DTC and choose DTC Properties from the pop-up menu.

To delete the DTC and the code that it inserted:

•	Right-click inside the object or code inserted by the DTC and choose Delete DTC from the pop-up menu.

You can also insert DTCs using the  Resource Manager  .


Inserting applets

Java is a programming environment that operates in conjunction with certain browsers to allow you to insert programs, called applets, in an HTML document. Coding applets is beyond the scope of this manual; see one or more of the many available books and online references for more information.

Wherever an applet occurs in a document, it reserves an area on the browser screen in which it does some special processing, such as drawing a picture or interacting with the user.

HoTMetaL PRO supports the APPLET element for inserting applets. The APPLET element can appear inside certain 'block' elements—paragraphs, headings, list items, tables, and CENTER—or it can appear on its own, directly inside the BODY tag.

You can insert applets into HoTMetaL PRO in several different ways:

•	Choose Resource Manager from the View menu. Navigate to the HoTMetaL PRO CD from the Desktop tab, open the Hmfx folder, choose the applets folder. This is the recommended way to insert the applets that are provided with HoTMetaL PRO.

•	Click on the [image] toolbar button or choose Java Applet... from the Insert menu. This will bring up a file chooser dialog box that prompts you to choose the applet .class file that you want to insert. After you choose the file, a dialog box in which you can set various attributes of the applet will appear (see Specifying the applet ).

•	Drag and drop an applet .class file into the HoTMetaL PRO document window. An APPLET element with certain attributes set will be inserted into the document, and a dialog box in which you can set various attributes of the applet will appear (see below).

•	Insert an APPLET element using Element... from the Insert menu, and edit its attributes manually by placing your insertion point inside the element and choosing Attribute Inspector from the View menu, or right-click and choose Attribute Inspector from the pop-up menu.

Sometimes applets are inserted and configured using Design-Time Controls. See Inserting Design-Time Controls for more information.

  More on this topic


Specifying the applet

The attributes of the APPLET element specify the applet file and the area on the screen in which it operates. The following attributes are set automatically if you drag and drop an applet into the HoTMetaL PRO document window or use the applet toolbar button to choose an applet file. They can be set manually by editing the attributes of the APPLET.

•	ID – The identifier for the applet.

•	CODEBASE – Specifies the folder in which the applet file is located. If this attribute is blank, the applet is assumed to be in the same folder as the current document. This is generally a relative URL pointing to a local folder.

•	CODE – The name of the file containing the applet. This attribute must specify a filename only (no directories). This information is required.

When you drag and drop an applet into the HoTMetaL PRO document window or use the applet toolbar button, the Applet Properties dialog box appears.

You can bring up this dialog box at any time by placing your cursor inside the APPLET, right-clicking, and choosing Applet Properties... from the pop-up menu, or choosing Java Applet... from the Insert menu. The following attributes can be set:

•	Alternate Text – Text that will be displayed if the document is displayed in a non-Java environment.

•	Name – A name that other applets in the same document can use to refer to this applet.

•	Width – The amount of horizontal space (in pixels) reserved for the applet. This information is required.

•	Height – The amount of vertical space (in pixels) reserved for the applet. This information is required.

•	Align – This lets you align the portion of the screen that has been reserved for the applet. You can align applets using the alignment toolbar buttons.

•	Vspace – Some extra space above and below the area reserved for the applet.

•	Hspace – Some extra space to the left and right side of the area reserved for the applet.

Some other attributes of applets can be modified with the Attribute Inspector:

•	ARCHIVE – Specifies a zip archive in which the browser will search for .class files. (Supported only by Netscape Navigator.)

•	MAYSCRIPT – Enables LiveConnect, in order to interact with JavaScript. (Supported only by Netscape Navigator; see Netscape's documentation on their Web site for details.)


Applet subelements

If the applet code requires some input data, this can be provided in the document itself, by way of PARAM elements. A PARAM element doesn't have any content; the information it supplies is contained in its attributes:

•	NAME – The name of an 'applet-specific attribute'. This must be a name that is known to the applet code.

•	VALUE – The value associated with NAME.

There are two other attributes of PARAM: VALUETYPE and TYPE, which are used for PARAM within OBJECT. They are not used for PARAM within APPLET.


Applets in a non-Java environment

An APPLET can contain 'block' elements such as paragraphs, lists, and blockquotes. The content of these elements will be displayed only in a non-Java environment (either because the browser isn't Java-aware, or because Java display has been turned off).


Inserting scripts

SCRIPT elements contain code, written in one of several programming languages, that is executed by a script-aware browser. JavaScript and Visual Basic Script (VBScript) are two such programming languages. The SCRIPT element allows users to put code directly in an HTML document. JavaScript is supported by version 2.0 and higher of Netscape Navigator, and by Microsoft Internet Explorer. VBScript is supported by version 3.0 and higher of Microsoft Internet Explorer. Coding in JavaScript and VBScript is beyond the scope of this manual; many books and online references are available.

Note: SCRIPT is not supported by all Web browsers. Use this feature with caution, and make sure that your script documents are readable by all browsers.


Inserting ActiveX and other objects

TheOBJECT element lets you insert a program—called an 'ActiveX Control' (formerly called 'OLE Control' or 'Internet Control')—into an HTML document.

Note: ActiveX and the OBJECT element are not supported by all Web browsers. Use this feature with caution, and make sure that your documents also contain markup readable by all browsers.

HoTMetaL PRO supports the use of objects and provides an easy way to insert ActiveX Controls. ActiveX Controls can be sent over the Internet, or, if a copy exists on your PC already, run directly from a Web browser. You can insert an ActiveX Control object in several different ways:

•	Click on the [image] toolbar button or choose ActiveX Control... from the Insert menu. This will bring up a dialog box that gives you a list of the ActiveX Controls installed on your system. If there is nothing in this dialog box, then there are no ActiveX Controls registered on your system. After you choose the control, the Object Properties dialog box in which you can set other attributes of the control will appear.

•	Drag and drop an ActiveX Control (.ocx) file into the HoTMetaL PRO document window. (These files generally reside in the Windows\System folder.) An OBJECT element will be inserted into the document, and the Object Properties dialog box in which you can set other attributes of the object will appear.

•	Insert an OBJECT element using Element... from the Insert menu.

You can show or hide the code in an ActiveX Control; that is, display the Object tags or show the ActiveX Control as a graphical object.

•	Right-click on the ActiveX Control and choose Show Object Markup or Show ActiveX Control.

  More on this topic


Object properties

The dialog box for setting the properties of the ActiveX Control is very similar to the one used to set the properties of the APPLET element: it contains settings for such display parameters as Width, Height, Alignment, Vspace and Hspace. There is also a Properties... button which will take you to a Control-specific dialog box to set parameters for that particular ActiveX Control. You can bring up this dialog again at any time by placing your cursor inside the OBJECT element, right-clicking, and choosing Object Properties... from the pop-up menu. You can also open the Object Properties dialog by choosing ActiveX Control... from the Insert menu when you have an ActiveX Control already selected.

The following attributes of OBJECT are used for ActiveX (and other objects):

•	ID – The identifier of the control.

•	CLASSID – The unique ID of the code. For an ActiveX Control, it's a string in base 64.

•	DATA – The URL pointing to the code.

•	CODETYPE – The MIME (Internet Media) type of the code (here, application/x-oleobject).

There are several other attributes that are used with different types of OBJECT. Here is a brief description:

•	BORDER – The border of the object in pixels. It functions the same as IMG's BORDER attribute.

•	ISMAP – Tells the Web browser that the object is an image map. It functions the same as IMG's ISMAP attribute.

•	USEMAP – Sets the location of a MAP definition. It functions the same as IMG's USEMAP attribute.

•	NAME – An identifier used with form submissions.

•	DECLARE – Declare but don't instantiate the object code.

•	CODEBASE – Specifies the folder where the code is located.

•	TYPE – Another way of specifying the MIME (Internet Media) type if the type of the DATA is distinct from the CLASSID type.

•	STANDBY – A string that can be displayed in the Web browser while the OBJECT is loading.

•	SHAPES – The object has shaped hypertext links.


Setting CSS Styles

HoTMetaL PRO supports the use of cascading style sheets for control over the presentation of documents in Tags On and Normal views. These styles will define how the document is displayed in other applications (such as browsers) only if those applications support cascading style sheets, and the style sheet is properly linked to the document. HoTMetaL PRO uses cascading style sheets to format XML, SGML, and HTML files, but only XML and HTML files can be formatted by current browsers.

Note: Style sheets do not affect source layout—how the file is formatted when it is saved. To control source layout, use the Source Layout tab of the Customization editor.

A cascading style sheet consists of one or more rules. These style sheets are said to be cascading because multiple style sheets can be applied to one document, and a set of cascading rules determine how style rules that apply to the same element are prioritized.

The cascading style sheet editor  provides extensive support for cascading style sheets.

  More on this topic


Cascading style sheet standards

There are two cascading style standards, called CSS1 (Level 1) and CSS2 (Level 2). CSS1 defines a wide range of style properties, and contexts in which they can be applied; CSS2 builds on CSS1 and describes more advanced formatting styles and contexts, such as absolute positioning, table styles, styles for elements with specific attribute values, styles for different output media, and styles for internationalized documents.

Since cascading style properties for an element can be set in several places, the cascading style sheet standards specify a set of rules that determine which of the available styles takes precedence.

These standards can be found on the W3C Consortium's Web site at http://www.w3.org/. See the Microsoft and Netscape home pages for information on their support for the CSS standards. The HoTMetaL PRO cascading style sheet editor provides extensive support for CSS1; CSS2 constructs can be entered in text mode.

HoTMetaL support for CSS

Not all properties that you can set with the cascading style sheet editor are implemented in the HoTMetaL PRO Normal and Tags On views. In particular, HoTMetaL PRO supports:

•	font-size, font-family, font-weight (all settings resolve to normal or bold), font-style (oblique displayed as italic)

•	text-decoration (except blink), text-align (except justify), color

•	background-color

•	margin-left, margin-right, margin-top, margin-bottom, float (images only)

•	display, list-style-type, white-space

•	prefix-format (an HoTMetaL PRO extension)

HoTMetaL PRO supports all CSS1 selectors, the CSS2 selectors for matching attribute values, and the CSS2 'pseudo-elements' ':before' and ':after'. ('Selector' is a general term that refers both to simple items such as elements, and complex items such as an element in a specific context.)

Browser support for CSS

Browser support for cascading style sheets is continually evolving; specific CSS properties are not guaranteed to work in any or all browsers. You should preview your documents in all browsers that you expect them to be viewed with, to determine the current level of support.


Starting the cascading style sheet editor

To use the HoTMetaL PRO cascading style sheet editor:

•	Choose CSS Styles... from the Format menu.

This command has a fly-out menu with five options:

•	Choose Refresh to apply any style changes to the current document.

•	Choose Element Styles to edit styles for the current element; displays the cascading style sheet editor. dialog.

•	Choose Document Styles to edit styles embedded in the current document; displays the cascading style sheet editor.

•	Choose Editor Display Styles to edit the default style sheet used by the HoTMetaL PRO formatter, Display\hmpro6.css; displays the cascading style sheet editor.

•	Choose External Styles to edit an external style sheet (which can be linked to the current document); displays the cascading style sheet editor.

If you choose one of the first three options, the cascading style sheet editor dialog is displayed.


Attaching cascading styles to a document

There are three ways to attach cascading styles to a document:

•	Attach an external style sheet file using a LINK element.

•	Embed a style sheet in the document using the STYLE element.

•	Assign an inline style rule for a specific occurrence of an element, using its STYLE attribute.

A set of cascading rules  determine the precedence of rules occurring in more than one location.

  More on this topic


Using external style sheets

Cascading style rules in a separate file can be linked to an HTML document.

•	Choose CSS Styles... from the Format menu.

•	Choose External Styles from the fly-out menu.

•	The next fly-out menu has several options:

•	Choose New... to create a new external style sheet.

•	Choose Open... to edit an existing style sheet.

•	Choose a file name from the menu to open one of the recently-opened style sheets.

•	Choose Add... to choose an existing style sheet to link to the current document. This creates a LINK element pointing to the style sheet.

If you chose one of the first three options, the cascading style sheet editor  is started; now you can edit the style sheet.

•	Create or edit styles for one or more elements, as desired.

•	Click on OK when done.

You can click on Save or Save As... to save the style sheet. Clicking on Reset discards all the changes you have made since the last save. You can open another style sheet by clicking on Open. Click on OK to finish; if the style sheet has not yet been linked to the current document, you will be asked if you want to link it now. Click on Cancel if you want to dismiss the CSS editor without saving any changes.


Editing styles for the current document

You can embed cascading styles directly inside an HTML document using the STYLE element, which is located in the document's HEAD element. A document can have more than one STYLE element.

•	If your document has more than one STYLE element, put the insertion point in the one you want to edit. If the insertion point is not inside any STYLE element, the last one in the HEAD will be edited. If there is no STYLE element, one will be created.

•	Choose CSS Styles... from the Format menu.

•	Choose Document Styles from the fly-out menu. The cascading style sheet editor  is started.

•	Create or edit styles for one or more elements, as desired.

•	Click on OK when done.

When you exit the cascading style sheet editor, the appropriate STYLE element will be created or updated.

You can also edit styles directly by typing inside a STYLE element. You should do this only if you're familiar with the syntax of CSS.

Because some browsers that are not CSS-compliant will display the contents of the STYLE element in the document window, it is a good idea to surround an embedded style sheet with an HTML comment. This will cause the content to be ignored by non-CSS browsers, but still interpreted by CSS-compliant browsers.

•	Type '<!--' just after the [STYLE> start-tag, but before the style information.

•	Type '-->' just before the </STYLE] end-tag, but after the style information.


Creating a style rule for a specific element

You can specify a style rule for an specific instance of an element, using its STYLE attribute.

There are two ways to do this:

•	Put the insertion point inside the element to which you want to assign a style.

•	Choose CSS Styles... from the Format menu.

•	Choose Element Styles from the fly-out menu.

Or:

•	Put the insertion point inside the element to which you want to assign a style.

•	Choose Attribute Inspector from the View menu, or type F6.

•	Click on the ... button in the STYLE field.

The cascading style sheet editor is started. Since you are editing styles for a single element only, you cannot choose a different element to edit.

•	 Use the tabbed 'style properties' section of the dialog to create or edit styles as desired.

•	Click on OK; the style information becomes the value of the element's STYLE attribute.


Cascading precedence rules

Since cascading style properties for an element can be set in several places, the cascading style sheet standard specifies a set of rules that determine which of the available styles takes precedence. An outline of these rules is presented here; you should consult the CSS standards for detailed information.

•	An 'inline' style property set explicitly for an element instance takes precedence over all other settings for that property.

•	If there is a combination of external style sheets linked to the document via LINK elements, and embedded style sheets contained in STYLE elements, the setting for a particular property that occurs last takes precedence over earlier settings for that property. By default, HoTMetaL PRO puts STYLE elements after LINK elements, but you can change the order of elements in the document window.

•	If two or more settings for the same property occur in the same style sheet, the final one takes precedence.

•	If a style sheet refers to an imported style sheet, property settings in the imported style sheet have lower priority than settings explicitly located in the style sheet.

The HoTMetaL PRO WYSIWYG and Tags On views display the document according to the styles contained in external style sheets, embedded style sheets, and inline styles.


Using the cascading style sheet editor (overview)

The cascading style sheet editor has two modes, simple and advanced. Each mode lets you set the same style properties, but the advanced editor lets you specify more complex situations in which these style properties can be applied.

•	The simple editor is the default mode when the style sheet editor is started. If the upper right corner of the dialog box contains the More button, the editor is in simple mode. In simple mode you can assign style properties to

•	To put the editor in advanced mode, click on the More button in the upper right corner of the dialog box; if the button reads Less, the editor is in advanced mode. In advanced mode  you can create context-sensitive style properties and apply styles to groups of elements.

To create a style for an element:

•	Select an element from the Element drop-down list.

•	Now you can use the tabbed 'style properties' section of the cascading style sheet editor to set the styles for the selected element.


Setting a cascading style for an element

To assign cascading style properties to an element (that is, all elements having a particular type, for example, 'all TITLE elements'):

•	The cascading style sheet editor should be in simple mode: it is in simple mode if the button in the upper right corner reads More; if it reads Less, click on the button to return to simple mode.

•	Select an element from the Element pull-down list. In addition to element names, there are three special names for non-elements:

•	 $COMMENT applies to all comments.

•	 $DOCUMENT applies to the entire document; use this selector for default styles.

•	 $PROCINS applies to all processing instructions. These names are specific to HoTMetaL PRO; they will have no effect in other applications.

•	Now you can use the tabbed 'style properties' section of the cascading style sheet editor to set the styles for the selected element.


Classes and IDs

Classes provide a way of assigning a style to many element instances, possibly of different types. IDs provide a way of assigning a style to a specific instance of an element.

Classes

A class is simply a group of elements, possibly scattered throughout a document, all of which have the same value for their CLASS attribute.

 For example, if you want a document on some topic to contain both 'basic' and 'advanced' sections, you could give all the elements that contained advanced material the CLASS attribute value 'advanced'. You could then use a cascading style sheet to format the 'advanced' class differently: display it in a different color, or even make it invisible.

IDs

While many elements can have the same CLASS attribute value, only one element in any document can have a particular ID attribute value. IDs are intended to be unique identifiers for elements in a document: HoTMetaL PRO will not validate a file in which the same ID value is used for more than one element. Cascading style sheets let you associate an ID attribute with a set of style properties and values, so that you can format a particular element instance in a certain way. (In order for you to be able to use IDs, your DTD must declare a ID attribute for any elements that you wish to process using IDs.)

  More on this topic


Creating classes and IDs

Classes, which are groups of elements in a document, and IDs, which are values given to ID attributes, are created in HoTMetaL PRO, and assigned styles in the cascading style sheet editor.

To create a class, you set the CLASS attribute of as many elements you wish to the same value.

•	Put the insertion point inside an element that you want to add to a class.

•	 Choose Attribute Inspector from the View menu, or press F6.

•	Insert a value in the CLASS field and press Enter.

•	Repeat this for each element that you want to add to the class, using the same value for CLASS each time.

To create an ID attribute, you set the ID attribute of one element to a unique value.

•	Put the insertion point inside the element that you want to assign an ID to.

•	 Choose Attribute Inspector from the View menu, or press F6.

•	Insert a value in the ID field and press Enter.

Now you can use the cascading style sheet editor to create selectors  for classes and IDs, and then assign styles to them.

Note: CLASS and ID attribute values must start with a letter and can contain only letters, numbers, and '-' (hyphen).


Creating selectors for classes and IDs

To create a selector for a class or ID:

•	Click on the Universal Selector... button in the cascading style sheet editor.

 The Edit Universal Selector dialog box appears.

To specify a class:

•	 Enter the CLASS attribute value in the Class text box.

 The CLASS selector will be displayed in the Element list with an initial period ('.') to indicate that it is a CLASS selector and not an element.

To specify an ID:

•	Enter an ID attribute value in the ID text box.

 The ID selector will be displayed in the Element list with an initial number sign ('#') to indicate that it is an ID selector.

•	Now you can use the tabbed style properties section of the CSS Editor to set style properties  for the class or ID selector.

The Edit Universal Selector dialog box is also used to create selectors that refer to attribute values.

Note: Class names and IDs that are to be used in style sheets must start with a letter and can contain only letters, numbers, and '-' (hyphen). Class names and IDs are not case-sensitive in a cascading style sheet: for example, classes called 'H1b' and 'h1B' are the same. A CLASS or ID rule that has no style properties associated with it will not be saved in the style sheet.


Creating selectors for elements with specific attribute values

The CSS2 standard enables you to create styles for elements with specific attribute values.

To specify an element with a specific value for an attribute:

•	If More is visible, click on it to go into Advanced mode.

•	Click on New....

•	In the Edit Selectors in Rule dialog, select an element (or other selector) in the Elements list.

•	Click on Add>>. (Alternatively, you can double-click on the element in the Elements list.)

•	Click on Edit.

•	In the Edit Simple Selector  dialog box, choose an attribute from the Attributes list.

•	Click on Add>>. (Alternatively, you can double-click on the attribute in the Attributes list.)

•	Enter an attribute value in the Edit attribute value text box.

•	Choose a comparison operator: '=' (equals), '|=' (does not equal), or '~=' (attribute value contains specified word).

•	Click on OK.

This creates a selector of the form:

element[attr="value"]

For example:

P[lang="de"]

This selector specifies P elements with a lang attribute value of 'de'.

To specify an element with any non-null value for an attribute, follow the steps above, but do not specify an attribute value.

This creates a selector of the form:

element[attr]

For example:

P[lang]

This specifies all P elements with a non-null lang attribute value.

Each of these selectors can also be written without a specific element name, so that the rules will apply all element types whose attributes match.

These selectors take the form:

*[attr="val"] *[attr]

For example:

*[lang="de"]

This specifies all elements with a lang attribute value of 'de'.

To create this kind of selector:

•	Switch to simple mode by clicking on Less (if it is displayed).

•	Click on Universal Selector.

•	Create a selector in the Edit Universal Selector dialog box, as described above.


Setting style properties

The properties section of the CSS editor dialog box (on the left, just below the Elements list) is tabbed: set style properties by clicking on the tab and moving to the appropriate section.

Click on the Font tab to edit font  the Text tab to edit text  the Background tab to edit background  the Box  tab to edit box the Border tab to edit border the  Classification tab to edit classification   and the Other tab for miscellaneous

By default, many style properties inherit their value for the current element from the corresponding property of the surrounding (enclosing) element, or from the default value for that property in the browser. For example, if the font-size property of a P element were set to inherit, it would have the same font-size property as a DIV element that contained that P element.

Note: If a property's value consists of a number and units, you cannot enter the numeric part of the value until you have chosen the units.

 Style changes can be seen in the Preview area on the right side of the dialog. Click on the Preview button to toggle previewing on or off. If you want to 'reset' a style, do so manually; clicking on the Reset button reloads the entire style sheet.

  More on this topic


Font properties

Click on the Font tab of the cascading style sheet editor to edit font properties in the cascading style sheet.

You can set the following properties:

•	font-family – The fonts available on your system will be listed in the primary pull-down list. You can either choose a font from this list or type a font name (for example, Times New Roman). You can also specify a font class (such as serif). The default is inherit.

In addition to the primary font family specification, you can specify secondary font or font class specifications, which will be used if the browser viewing the file is unable to find the specified primary font family. For example, if you use the font Gill Sans as your primary font family specification, but a user is viewing your document on a PC that does not have the Gill Sans font, you may want to use a secondary specification such as sans-serif, so that even if the user is not viewing the document with the exact font that you specified, he or she is at least viewing it with a font of the same type, that is, a sans-serif font.

Make your secondary font-family choices from the new secondary pull-down list. Then click on Add to add the secondary font families to the secondary list. These choices are ranked by order: that is, an item higher up in the secondary list will be used first, if it is available. You can delete an entry from this list by clicking on it and then clicking on Delete.

•	font-size – Choose a unit of measurement from the pull-down menu and enter a value for the font size; points are usually the most appropriate unit.

•	line-height – Choose a unit of measurement from the pull-down menu and enter a value for the minimum distance between the baselines of lines of text. The percent  unit means a percentage of the font size. For example, if the font size were 10 points, and the line-height value were 120%, the minimum distance between baselines would be 12 points (120% of 10 points).

•	font-style – Choose inherit, normal, or italic from the pull-down list.

•	font-variant– Choose inherit, normal, or small-caps from the pull-down list.

•	font-weight – The style sheet lets you set levels of font weight, so you can, in effect, make text 'more bold' and 'less bold'. Selecting normal uses the default weight; selecting inherit uses the same font-weight value as the containing element. Selecting lighter or bolder decreases or increases the font weight, respectively. You can also specify font weight on a numerical scale where 100 is the lightest weight and 900 is the heaviest.


Text properties

Click on the Text tab of the cascading style sheet editor to edit text properties in the cascading style sheet.

You can set the following properties:

•	text-indent – Sets the indent for the first line of the element. Enter a numeric value and choose the units for the value you enter. To indent the whole element, set a value for the margin-left property.

•	word-spacing – Sets the spacing between words. The value you enter will be added to the default word spacing.

•	letter-spacing – Sets the spacing between letters. The value you enter will be added to the default letter spacing.

•	vertical-align – Positions the element relative to the baseline of its parent element. A percent value moves the element up or down from the baseline. This property is applied only to inline elements. Choose how you would like your text vertically aligned from the pull-down list containing several alignment styles.

•	color – Specifies the color of the element's text. There are three ways to specify font color:

•	Choose a pre-defined color from the pull-down list containing the standard 16 Windows colors.

•	Choose RGB from the pull-down list and enter a color in #RRGGBB format.

•	Choose a custom color by clicking on the Custom button: this brings up the Choose Color dialog box.

•	 text-align (justification) – How the text is aligned within the element. You can choose from inherit, left, center, and right.

•	 text-transform – Display text with the first letter capitalized, all in uppercase, or all in lowercase.

•	 text-decoration – You can choose one or more of underline, linethrough, overline, blink. If none is chosen, any previous value for underline, overline, blink, or linethrough is overridden. The default is 'inherit'.


Background properties

Click on the Background tab of the cascading style sheet editor to edit background properties in the cascading style sheet.

In this section, you can set the following properties:

•	background-color – Sets the background color for the specified element. There are three ways to specify background color:

•	Choose a predefined color from the pull-down list containing the standard 16 Windows colors.

•	Choose RGB from the pull-down list and enter a color in #RRGGBB format.

•	Choose a custom color by clicking on the Custom button: theChoose Color dialog box appears.You can also use background-color to set a transparent background: just choose transparent from the pull-down list of colors.

•	background-image – Enter the URL for an image file that you wish to use as a background (generally, this URL is given in relative format and specifies a file in the current directory). You can choose an image by clicking on Browse.

•	background-repeat – Sets how the background image will repeat or 'tile'.

•	repeat (the default): the background image will repeat indefinitely in both directions

•	repeat-x: the background will repeat horizontally only

•	repeat-y: the background image will repeat vertically only

•	no-repeat: the background image will not repeat; it will only be seen once (useful for large images)

•	background-attachment – Specifies whether the background image will scroll along with the browser window when the user scrolls, or whether it will remain fixed.

•	background-horizontal, background-vertical – You can specify the position of the background image by choosing a value for either or both of these properties. background-horizontal can have the following values:

•	left: positions the left edge of the background image at the left side of the browser window

•	center: positions the background image in the center

•	right: positions the right edge of the background image at the right side of the browser window

•	percentage: you can specify the exact positioning of a background image by entering a percentage. 0% is the left edge of the browser window (and is equivalent to left); similarly, 100% specifies the right edge. 43%, for example, would position a background image just left of center.

•	centimeters, inches, points, or pixels: specify an exact positioning using any of these units. The background image will be positioned the specified distance from the left edge.
background-vertical can have the following values:

•	top: positions the top edge of the background image at the top of the browser window

•	center: positions the background image in the center

•	bottom: positions the bottom edge of the background image at the bottom of the browser window

•	percentage: you can specify the exact positioning of a background image by entering a percentage. 0% is the top edge of the browser window (and is equivalent to top); similarly, 100% specifies the bottom edge. 75%, for example, would position a background image near the bottom.

•	centimeters, inches, points, or pixels: specify an exact positioning using any of these units. The background image will be positioned the specified distance from the top edge.


Box properties

Click on the Box tab of the cascading style sheet editor to edit element box properties.

In the CSS1 formatting model, all displayed elements are associated with a rectangular box. This box consists of four nested rectangles: the innermost rectangle contains the element's content; this is surrounded by a padding area; the padding area is surrounded by a border; finally, the border is surrounded by a margin area. In practice, most elements have padding and border areas with a width of zero; for most block elements, one or more of the margin properties has a positive value.

The Box tab lets you set margin, padding, width, height, and 'floating' properties. The Border tab  lets you set border properties.

In this section, you can set the following properties:

•	margin-top, margin-bottom, margin-right, and margin-left – Set the margin sizes for each respective margin side. margin-left and margin-right are used to set left and right indentation, respectively.

•	padding-top, padding-bottom, padding-right, and padding-left – Set the amount of space between the border and the element content.

•	width and height – Set explicit dimensions for the box around the element content. For example, an image can be rescaled using width and height values for an image element.

•	float – Allow the element to 'float' to the left or right until it abuts the margin, padding area, or border of a block-level element. For example, an image with a float value of 'left', contained in a paragraph, will be displayed in the upper left corner of the paragraph, provided that no other block elements were in the way.

•	clear – Specify sides of the element's box on which other floating elements may not be displayed.

For all properties except float and clear, you must choose the units from the drop-down menu before you can enter a value.


Border properties

Click on the Border tab of the cascading style sheet editor to edit element border properties.

In the CSS formatting model, all displayed elements are associated with a rectangular box area. This box consists of four concentric rectangles: the inner rectangle contains the element's content; this is surrounded by a padding area; the padding area is surrounded by a border; finally, the border is surrounded by a margin area. The Box tab lets you set margin, padding, width, height, and contents properties.

To set the style properties for a specific border of the element:

•	Click on the radio button for Top, Right, Bottom, or Left.

•	Set the style properties.

To set the style properties for all borders of the element:

•	Set the style properties.

•	Click on Apply to all.

You can set the following properties:

•	border-width – Sets the width of the specified border. Choose a unit of measurement from the pull-down menu and enter a value for the specified width.

•	border-style – Sets the style of the specified border.

•	border-color – Sets the background color for the specified border. You can choose a color in one of three ways:

•	Choose a predefined color from the pull-down list containing the standard 16 Windows colors.

•	Choose RGB from the pull-down list and enter a color in #RRGGBB format.

•	Choose a custom color by clicking on the Custom button: theChoose Color dialog box appears.


Classification properties

Click on the Classification tab of the cascading style sheet editor to edit classification properties in the cascading style sheet. Classification properties enable elements to be classified as belonging to one of several types of elements: block elements, inline elements, and list item elements.

You can set the following properties:

•	display – The basic element type: block, inline, list-item, or none. Elements with type none are hidden—they are not displayed by the browser.

Note: To cause an element to be block or inline when the file is saved, choose 'Element Options' settings in the Source Layout tab of the Customization editor. You can hide an element (in Normal view only) by choosing 'Hide in Normal View' in the General tab.

•	 white-space – How white-space (spaces, tabs, and newlines) is processed in elements with display set to block. The allowed values are:

•	inherit: inherit the value from the parent element.

•	normal: sequences of white-space characters are each collapsed into a single space.

•	 pre: treat white-space as in the HTML PRE element (all white-space will be preserved exactly as it is typed). (In this kind of element, press Shift+Enter to terminate the element, since Enter by itself will just insert a newline.)

Note: To apply this option to an element when the file is saved, turn on 'Preserve Space' in the Source Layout tab of the Customization editor.

•	nowrap: text is not wrapped except where there is an HTML BR (line break) tag.

•	 list-style-type – The type of list item marker to use. This can be applied to the list element (that is, the element that contains the list items) or to the list item elements themselves. If you set list-style-type, then the list element should have a margin-left value, so that the list bullets will be displayed correctly.

•	 list-style-position – How the list item marker is positioned, for elements with display set to list-item. outside produces a 'hanging' marker—all lines of the list item content are indented to the right of the marker; inside causes the second and subsequent lines of the list item content to be indented at the same level as the marker.

•	 list-style-image – Specifies an image to be used as the list item marker for elements with display set to list-item.

List properties are inherited; therefore, properties such as list-style-type do not have to be set directly for an element with display set to list-item: they can be set for an enclosing element, and will then be inherited by sub-elements of type list-item.

Note: Use the 'Other' tab, or 'Edit Style Text' or 'Edit Rule Text' to create a 'list-style' rule.


Miscellaneous properties

Click on the Other tab in the cascading style sheet editor to edit miscellaneous properties.

This section of the cascading style sheet editor is used to:

•	Enter values for property types that are extensions to the CSS standard or are not explicitly supported by the cascading style sheet editor.

•	Assign priorities to rules.

Extensions

The cascading style sheet standards  are continually being upgraded. Values for new property types can often be entered using the Other section of the cascading style sheet editor. In general, you can use Other to edit a property if it can be expressed in the form:

property : value

For example:

font-foundry : "Gill's Font Farm"

•	Click on the Other tab.

•	Enter the property (for example, 'font-foundry') in the Other properties text box.

•	Enter the value in the Value text box (for example, "Gill's Font Farm").

•	 You can delete these custom properties by clicking on Delete.

If an extension can't be expressed in this form (that is, it requires a different syntax), you can enter it in in text mode  using Edit Style Text or Edit Rule Text. In particular, if you need to specify a selector  that doesn't have explicit support in the cascading style sheet editor, you will have to edit it in text mode.

Note: Style property values containing spaces should be surrounded by double quotes; the cascading style sheet editor will add these automatically. Values containing single quotes should also be surrounded by double quotes, and vice versa; you should add these manually.

Priorities

If certain elements are assigned styles in more than one way (for example, in the document itself and by means of an external style sheet), you can help to resolve style conflicts by choosing priorities for important styles.

•	Click on the Other tab.

•	Select a style property from the Property pull-down list.

•	Enter a specification in the Priority text box. Entering important in this text box will make the style property you have specified more rigid and less able to be influenced by competing style specifications.

•	Optionally, enter a comment in the Comments text box.


Editing styles as text

By clicking on Edit Style Text or Edit Rule Text in the cascading style sheet editor, you can bring up a simple text editor to edit style rules in text mode . Edit Style Text lets you edit the whole style sheet; Edit Rule Text lets you edit the rule for the current element only. Edit Style Text is unavailable if you started the cascading style sheet editor via the Attribute Inspector.

Style properties or values that are not recognized by HoTMetaL PRO will be displayed in the Other tab  in the cascading style sheet editor.

Selectors  that don't have explicit support in the cascading style sheet editor must be edited in text mode.


Displaying prefix and suffix text

To display some text before and after the contents of an element in the HoTMetaL PRO Tags On and Normal views, you can use the :before and :after 'pseudo-elements'. Text displayed in this way is called 'prefix text' and 'suffix text', or, in general, 'generated text'.

:before and :after are called 'pseudo-elements' because they are attached to existing element names to create a selector that applies to the original element. For example, P:before refers to text displayed before the content of the P element.

There are two ways to create selectors containing these pseudo-elements. The simplest way is to click on Edit Style Text and type the selector and a rule explicitly:

P:before { content: "Start: "; }

P:after { content: " :End"; }

Another way is as follows:

•	Click on More to put the CSS Editor into Advanced mode.

•	Click on New... to display the Edit Selectors in Rule dialog.

•	In the list on the left, select the element to which you want to attach :before or :after.

•	Double-click on the element or click on Add>>.

•	Select the element in the list on the right.

•	Click on Edit to display the Edit Simple Selector dialog box.

•	In the Pseudo-class/element list, choose before or after.

•	Click on OK.

•	Click on OK in the Edit Selectors in Rule dialog.

Once you have created the pseudo-element you can set properties for it. The text is specified with the 'content' property, as shown in the example above. You can also set the font, color, and so forth.

HoTMetaL PRO provides the extension prefix-format property to display prefix text. This is an HoTMetaL PRO extension and is not supported by browsers. You can create rules for prefix-format using Edit Style Text.

Here are some examples:

BLOCKQUOTE { prefix-format: "Warning!";}

BLOCKQUOTE { prefix-format: "Please note:";}

HoTMetaL PRO provides special prefix text strings that display the attributes of an element. To display all of the attributes that have a value, use the string '%attribute-list;'. To display the value of an attribute called NAME, use '%attribute NAME;'. For example:

P {prefix-format: "[ %attribute-list; ]";}

A {prefix-format: "[ %attribute HREF; ]";}

These strings can be used only with the prefix-format property. These are also HoTMetaL PRO extensions for formatting its own document window.


Forcing start-tags to a new line

Block elements are always formatted with a line break before and after their content. In Tags On view, this generally means that the start-tag of a block element will be preceded by a line break. However, if a block element is nested inside another block element, with no text or other content between their start-tags (for example, a section title inside a section), then there is no line break before the second start-tag. If you wish to force every block element's start-tag to start on a new line, you can use a special rule. This rule is an HoTMetaL PRO extension, and is not used by other applications.

•	Choose CSS Styles from the Tools menu, and then choose Current Element... from the fly-out menu.

•	In the CSS editor dialog, click on Edit Style Text.

•	Type the following line anywhere in the style sheet (for convenience, we suggest you type it at the top):

@sq-tag-makes-line-non-empty;

•	Click on OK.

•	Click on OK in the CSS editor.


Examples of simple styles

The following sample style sheet contains three style rules that were created with the cascading style sheet editor in simple mode:

1	The first rule states that all DOCTITLE elements will have a font size of 20 points, line height of 22 points, and be displayed in green.

2	The second rule states that all elements in the class 'student' (that is, all elements, of any type, whose CLASS attribute has the value 'student') will be hidden.

3	The third rule states that the element with ID value 'para1' will be displayed in a bold, italic font.

H1 { font-size:20pt; line-height: 22pt; color: green }

.student { display: none }

#para1 { font-style: italic; font-weight: bold }


Cascading styles: Advanced mode

Use the advanced mode of the cascading style sheet editor to:

•	Create rules that group together several element types, elements in a particular context, classes, and

•	Assign style properties to these

•	Re-order rules with respect to one

To use advanced mode, click on the More button in the upper right corner of the cascading style sheet editor dialog box.

  More on this topic


Creating and editing advanced rules

In simple mode you can create rules that assign style properties to a single element, a class, or an ID.

In advanced mode you can create rules that associate style properties with a group of several selectors. 'Selector' is a general term that refers both to simple items such as elements, and complex items such as an element in a specific context.

All of the defined rules are displayed in the Edit Style Rules list: that is, all of the selectors in these rules are displayed. This list also includes any rules that you created in simple mode.

To create a new rule (that is, assign selectors to the rule):

•	Click on the New button.

To modify an existing rule (that is, add or delete selectors):

•	Select a rule in the the Edit Style Rules list.

•	Click on Edit.

 When you click on New or Edit the Edit Selectors in Rule dialog box appears.

From this dialog box you can add the following selectors to the rule:

After you create a rule, you must specify style properties for it, or else it won't be saved when you save the style sheet.

To make a copy of an existing rule:

•	Click on a rule in the the Edit Style Rules list.

•	Click on Copy.

A copy of the rule is added to the Edit Style Rules list. The copy will, by default, have all of the style properties of the original.

To delete a rule:

•	Click on the rule in the the Edit Style Rules list.

•	Click on Delete.

Note: Clicking on 'Cancel' will not restore deleted items.


Adding an element to a rule

Style rules can apply to a combination of elements, classes, IDs, elements in classes,  and 'elements in context'.

For example, you can create a rule that applies to all PARA1, PARA2, and PARA3 elements. To add an element to a rule:

•	Make sure the cascading style sheet editor is in advanced mode (click on the More button if it's showing).

•	Click on New to create a new rule, or select an existing rule from the Edit Style Rules list and click on Edit.

•	In the Edit Selectors in Rule dialog box that appears, select an element from the Elements list.

•	Move it into the Selectors in Rule list by double-clicking on the element or by clicking on Add >>.

•	Repeat the last two steps if you want to add other elements.


Adding a class or ID to a rule

To add a class or ID to a rule:

•	Make sure the cascading style sheet editor is in advanced mode (click on the More button if it's showing).

•	Click on New to create a new rule, or select an existing rule from the Edit Style Rules list and click on Edit.

•	In the Edit Selectors in Rule dialog box that appears, double-click on --Universal-- in the Elements list (or click once and then click on Add >>).

•	In the Edit Simple Selector dialog box that appears, enter the Class or ID that you want to add.

•	If you entered a class, click on Add Class, and then click on the class name in the box on the right.

•	Click on OK.

•	Repeat the last four steps if you want to add other classes or IDs.

Note: You can also create classes and IDs in simple mode by clicking on the 'Universal Selector' button.


Adding an element in a class (or with an ID) to a rule

When you add an element that's in a particular class to a rule, the style properties specified for this rule will apply to the element only when it has a particular CLASS attribute value. When you add an element with particular ID to a rule, the style properties specified for this rule will apply to the element only when it has a particular ID attribute value.

•	Make sure the cascading style sheet editor is in advanced mode (click on the More button if it's showing).

•	Click on New to create a new rule, or select an existing rule from the Edit Style Rules list and click on Edit.

•	In the Edit Selectors in Rule dialog box that appears, select an element from the Elements list.

•	Move it into the Selectors in Rule list by double-clicking on the element or by clicking on Add >>.

•	Click on the element in the Selectors in Rule list.

•	Click on Edit.

•	In the Edit Simple Selector dialog box that appears, enter the desired Class or ID.

•	If you entered a class, click on Add Class.

•	Click on OK.

•	Repeat the previous six steps if you want to add other elements.

Pseudo-classes

Another way to refine the element that you are building a style rule for is to enter a pseudo-class or pseudo-element. Pseudo-classes are not attributes, but they are characteristics of certain elements that are recognized by programs that understand the CSS standard.

Pseudo-elements are used to address sub-parts of elements. For example, the P:first-letter pseudo-element matches just the first letter of a paragraph (to be used for formatting drop capitals, for example). :before and :after are used when defining prefix and suffix text.


Adding an 'element in context' to a rule

Sometimes you will want a style rule to apply to an element only when it has a particular ancestor (or ancestors). For example, you might want a PARA within a QUOTE to have a different style than just plain P. This kind of selector is called a contextual selector.

•	Make sure the cascading style sheet editor is in advanced mode (click on the More button if it's showing).

•	Click on New to create a new rule, or select an existing rule from the Edit Style Rules list and click on Edit.

•	In the Edit Selectors in Rule dialog box that appears, select the element whose context you wish to specify in the Elements list.

•	Move it into the Selectors in Rule list by double-clicking on the element or by clicking on Add >>.

•	Click on Edit Context.

The Edit Contextual Selector dialog box appears.

 To specify that an element should be the ancestor of the current element (in order for the styles to apply):

•	Select the desired 'ancestor' element from the Elements list on the left.

•	Click on Add Before >>.

 On the other hand, you can specify that the current element should be an ancestor of a particular element:

•	Select the desired 'descendant' element from the Elements list on the left.

•	Click on Add After >>.

Note: This defines a selector that can match instances of the 'descendant' element. It is not possible to define a selector that matches 'all instances of element A that have element B as a child'.

You can add as many elements as are needed to this sequence of ancestors and descendants:

•	Select an element in each of the two lists.

Now:

•	Click on Add Before >> to make the element in the Elements list the ancestor of the element in the Contextual Selector list.

Or:

•	Click on Add After >> to make the element in the Elements list the descendant of the element in the Contextual Selector list.

If desired, you can further refine any element in the Contextual Selector list by clicking on Edit and specifying a class.


Examples of advanced styles

The following sample style sheet contains three style rules that were created with the cascading style sheet editor in advanced mode.

1	The first rule states that both TITLE3 and TITLE4 elements will have a font size of 14 and a line height of 16.

2	The second rule states that a P element that is contained in a QUOTE element will be indented by 0.5 inches.

3	The third rule states that an LI element in the class 'student' (that is, its CLASS attribute has the value 'student') will be hidden.

H3, H4 { font-size: 14pt; line-height: 16pt }

BLOCKQUOTE P { text-indent: 0.5in }

LI.student { display: none }


Rule ordering

You can change the order of the rules in the advanced mode of the cascading style sheet editor by selecting a rule and then clicking on the [image] 'up' or [image] 'down' arrow to move it higher or lower in the list. This ordering may affect how elements are displayed in the browser.


Importing another style sheet

You can import another style sheet and all its rules into the current style sheet. This can be quite useful in many ways; for example, if you have made a 'reference' style sheet for the basic styles of your project, and would like to modify only a few selected styles. Styles in an imported style sheet have lower precedence than styles set explicitly in the style sheet.

•	Make sure the cascading style sheet editor is in advanced mode (click on More button if that button is visible).

•	Create a new style rule by clicking on New.

•	Click on the @import radio button in the Edit Selectors in Rule dialog box. The Edit @import dialog appears.

•	Enter the URL for the imported style sheet in the URL text box, or click on Browse to select it.

•	Optionally, enter comments about this imported style sheet in the Comments text box provided.


Adding meta-information

A HoTMetaL PRO extension to cascading style sheets lets you enter rules for keeping track of style sheets, versions of style sheets, etc. These 'rules' are informational only and don't affect how the browser displays documents.

 To enter meta-information:

•	Make sure the cascading style sheet editor is in advanced mode (click on More if that button is visible).

•	Create a new style rule by clicking on New.

•	Click on the @meta radio button in the Edit Selectors in Rule dialog box. The Edit @meta dialog appears.

•	Enter the name of a particular kind of information you want to enter in the Name text box, or select one from the pull-down list.

•	Enter the value for that piece of information in the Value text box.

•	Optionally, enter a comment in the Comments text box.

•	Optionally, enter comments on the entire '@meta rule' in the General comments text box.


Customizing HoTMetaL

Several types of customization can be performed on HoTMetaL PRO.

•	Create and install document templates.

•	Set up the editor display styles for elements in each DTD and rules file, using the cascading style sheet editor.

•	Set up macros. Macros can be stored in two files: the default HoTMetaL PRO macro file is Macros\hotmetal.mcr; in addition, you can have a macro file that is tied to the rules file used by the current document. For example, if the document uses the default HoTMetaL PRO rules file, hmpro6.rls, the macro file hmpro6.mcr will be loaded.

For information on recording HoTMetaL PRO actions in macros, see Using macros in the online help. In addition to recording HoTMetaL PRO actions, you can create macros that contain scripts. For more information, choose SoftQuad Applications from the Windows Programs menu, and then HoTMetaL PRO 6.0 Programmers' Guide.

•	Customize your own toolbars and menus .

•	Customizations of the document window using the Customization editor.

•	Set up global customizations using the HoTMetaL PRO Options dialog.

•	Set up Asset Manager files. See also the section Customizing the Asset Manager in the HoTMetaL Programmers' Guide.

•	Write controls in programming languages like C++, which can be called from scripts.

  More on this topic


Creating your own templates

Document templates are used when a new file is created with the New... command.

To create your own templates for use with the New... command:

•	Choose New from the File menu, and then New Page... from the flyout menu.

•	In the template chooser, click on the tab corresponding to the type of template you want to create (choose the General tab if you want to start with a new, empty document).

•	Open the template of your choice.

•	Add the desired markup and content.

•	 Save the file in one of the folders underneath the Template folder in the HoTMetaL folder. Alternatively, you can create a new folder underneath Template (this will create a new tab in the template chooser), and save your template file to the new folder.


Setting up display styles

HoTMetaL PRO uses Cascading Style Sheets to format documents in the WYSIWYG and Tags On views. Documents can also be linked to these style sheets in order to control their formatting in CSS-compliant browsers.

HoTMetaL PRO includes a cascading style sheet editor  which provides extensive support for cascading style sheets.

To get started with setting up the document styles, you should open or create a document that contains the most commonly-used elements. When the document is open:

•	Choose CSS Styles... from the Format menu and choose Document Styles.

The Cascading Stylesheet Editor is displayed, enabling you to set the document formatting properties for your DTD or rules file.

See the section Editor display styles  for more information.


Customizations of the document window

The following configurations of the document window can be carried out with the Customization editor:

•	Set element-specific source layout properties

•	Define default content that will be inserted when a particular element is inserted.

•	Specify a script to be run when a particular element is inserted.

Note: The customizations performed in this editor are saved in the 'hmpro6.ctm' file.

To display the Customization editor:

•	Choose Customizations... from the Tools menu, or press Ctrl+Shift+C.

The customization editor has a list of all the tags on the left, and a set of tabs on the right. You select an element in the element list in order to perform customizations on it in the tab on the right. You can specify an element with specific parents by right clicking on the element and choosing Add "In Parents" Item.

When you click on any tab, the elements that currently have a setting for that tab are marked with an appropriate icon.

  More on this topic


General element properties

The General tab of the Customization editor enables you to set general element properties.

•	Click on the General tab.

•	Select an element in the list on the left.

Name and description

You can enter a short description of the element in the Name text box.

The element Description will appear as a help string in the help area at the bottom of the Element List dialog.

Formatting

Turn on Hide in WYSIWYG View if you don't want this element displayed in WYSIWYG View.

Choose a Tag Color to set the color of the tag icons in Tags On view for this element (this overrides the global tag color chosen in the View options dialog. You can enter a color name such as 'red' or a hexadecimal value such as 'ff0000' in the text box, or click on the button to display the Color dialog box.

OnInsert action

You can configure HoTMetaL PRO to enter some default content when an element is entered, or to run a script when the element is entered. These options are mutually exclusive.

Specifying content

If you want some default content to be entered:

•	Turn on Content.

•	Enter or paste the default content in the editing pane.

The default content must start with the specified element, not a subelement. This allows you to specify default attribute values for the element.

The default content can contain 'replacement text'—text that will be inserted in an element by default when the element is inserted. Replacement text is contained in xm-replace_text processing instructions. For example:

<Title><?xm-replace_text {Book Title} ?></Title>

When the <Title> is inserted, the text '{Book Title}' will be inserted inside it. This is not ordinary text: it is meant to be typed over with real content, and can be selected by simply clicking on it.

Specifying a script

You can specify a script that will be loaded and run whenever a particular element from the current DTD is inserted. Most scripts will be written in JScript or VBScript, but you can use any language for which you have a scripting engine that conforms to the Microsoft Scripting Engine interface. The name of the language needs to correspond to the prog.id (for example, 'PerlScript' or 'Python') of the ActiveX control that implements the script engine.

The HoTMetaL PRO scripting interface is based on a set of scripting extensions that implement the Document Object Model (DOM). For more information, choose SoftQuad Applications from the Windows Programs menu, and then HoTMetaL Programmers' Guide.

To specify a script:

•	Select the language used; if you are not using JScript or VBScript, enter the language name in the Other text box.

•	Type or paste the script in the editing pane provided.

Example

Note: The Selection.InsertWithTemplate method can be used in a script to insert other elements and their default content.


Source Layout

HoTMetaL PRO uses indentation and line breaking to format HTML source files (that is, 'raw' document content, as displayed in HTML Source view and saved to a file) in a way that helps users distinguish content and various kinds of markup; this formatting is called 'source layout' or 'pretty printing'. While the default settings should make it easier for you to work with source code (in comparison to a text editor), you may want to adjust the settings to make certain elements stand out.

On the other hand, you may wish to turn off source layout, since it adds extra characters (spaces, tabs, and newlines) to your document, which you may not want. Alternatively, you can apply source layout to the document in general, but turn on the Preserve Space option for some elements (see below).

Note: These settings do not configure how the document is formatted in WYSIWYG and Tags On views. This formatting is specified using the cascading style sheet editor.

•	Click on the Source Layout tab.

Any layout options you choose are applied to files saved from Tags On and WYSIWYG views. These options will also be applied when you switch from Tags On or WYSIWYG view to HTML Source view.

Files are saved from HTML Source view 'as-is'. To force layout options to be applied to HTML Source view, turn on Enable Source Layout, switch to Tags On or WYSIWYG view, and then switch back to HTML Source view.

If you wish to specify source layout options for one or more elements:

•	Turn on Enable Source Layout

Source layout will add spaces, tabs, and newlines to your file. If you do not want layout options to be applied to your files, turn off Enable Source Layout. This disables all source layout properties.

General Options

The following properties will apply to all elements:

•	The Indent is the number of characters that the contents of an element will be indented if Indent Content (see below) is turned on for that element.

•	You can choose the maximum Line Length in the source file.

Element layout options

You can choose layout options for one or more elements (you don't have to click on Apply for each element—choose options for as many elements as you need to and then click on Apply).

•	Select the element from the Elements panel.

•	 Turn on Indent Content if you want the contents of the element to be indented. This option is commonly chosen for list elements.

•	 To preserve white-space (spaces, tabs, newlines) turn on Preserve Space.

Note: To preserve white-space in the Normal and Tags On views, set the 'white-space' property to 'pre' in the cascading style sheet editor Classification tab.

•	You can add a blank line or newline (line break) before or after the start-tag or end-tag. This lays out the element as a block or inline element.

Note: To choose block or inline formatting in the Normal and Tags On views, set the 'display' property to 'block' or 'inline' in the cascading style sheet editor Classification tab.


Creating customized toolbars and menus

You can create new toolbars and menus in HoTMetaL PRO, and customize existing ones. Buttons and menu items can be assigned to built-in commands or user-defined macros.

Note: Toolbar and menu customizations are saved in the'~hmpro6.tbr' file.

  More on this topic


Creating custom toolbars

To create a new toolbar:

•	Choose Toolbars... from the View menu, or right-click on the toolbar area and choose Customize... from the pop-up menu. The Toolbars dialog box appears.

•	Click on the Toolbars tab.

•	Click on New.... The New Toolbar dialog box appears.

•	Type in a name for your new customized toolbar.

•	Click on OK.

A small floating window ( [image]) will appear: this is your customizable toolbar. Now you can add buttons to the new toolbar.

•	In the Customize dialog box, click on the check boxes to turn Show Tooltips or Flat Look on or off.


Adding new and existing buttons to a toolbar

To add buttons to a new or existing toolbar:

•	Choose Toolbars... from the View menu, or right-click on the toolbar area and choose Customize... from the pop-up menu. The Toolbars dialog box appears.

•	Click on the Buttons tab.

•	Select a category from the Toolbars menu. The categories consist of the standard toolbars, the Application macros, and the hmpro6 macro file if a document is currently open.

If you selected a standard toolbar category:

•	Select the toolbar button that you would like to add to your customizable toolbar.

•	Drag and drop the toolbar button onto a toolbar; the button carries with it its standard HoTMetaL PRO functionality.

•	When you have added the desired buttons, click on Close.

If you selected one of the macro categories, several new controls will appear in the dialog box.

•	 Choose Image enables you to choose from several sets of icons. Three of these sets are Custom Images: you can modify these image sets with an image editor. The source graphics for these image sets are in the folder Icons. The image names indicate which set they are from. If you update or replace some of these images, the changes will be reflected in the image sets displayed here.

•	The Macros list contains all the macros defined in the current macro file.

•	The Tooltip text box enables you to enter a tooltip for the custom toolbar button.

•	The Description for status bar text box enables you to enter a description of the custom toolbar button that will be displayed in the status bar when the mouse cursor is over the button.

To associate a toolbar button with a macro:

•	Choose a macro from the Macros list.

•	The macro may have been associated with an image via the Macros dialog. You can also choose an image now: click on Choose Image to get a set of image groups.

•	Select an image group from the list on the left.

•	Select an image.

•	Modify the default Tooltip, if desired.

•	Modify the default Description for status bar, if desired.

•	Drag and drop the toolbar button onto a toolbar.

•	When you have added all desired buttons, click on Close.


Creating custom menus

To create a new menu or add items to an existing menu:

•	Choose Toolbars... from the View menu, or right-click on the toolbar area and choose Customize... from the pop-up menu. The Toolbars dialog box appears.

•	Click on the Menus tab.

Inserting a menu

To insert a new menu:

•	Click on Menu Bar in the tree structure on the left. The Add Menu button will become enabled.

•	Click on Add Menu.

•	Enter the name of the new menu in the Caption text box. Before the letter that you want to use as the menu's mnemonic (the underlined letter), type the '&' character. For example: M&ymenu. The mnemonic you choose should not be used by any other menu.

•	If you want to place a separator before this menu, turn on Begin Group.

•	To move the menu left or right in relation to the existing menus, click on Move Up (left) or Move Down (right).

Inserting a menu item

To insert a new menu item:

•	Click on the menu to which you want to add the new item (this can be a new or built-in menu). The Add Menu Item button will become enabled.

•	Click on Add Menu Item.

•	Enter the name of the new menu item in the Caption text box. Before the letter that you want to use as the menu items's mnemonic, type the '&' character. The mnemonic you choose should not be used by any other menu item or submenu in this menu.

•	Enter a description in the Description text area. The description will be displayed in the status bar when the mouse cursor is over the menu item.

•	To associate the menu item with a macro, which will be run when the menu item is chosen, choose the macro from the drop-down list of macros. If a toolbar button has been created and associated with this macro, the icon on the toolbar button will also appear in the menu item; if the macro has a shortcut key, it will be displayed in the menu item.

•	If you want to place a separator before this menu item, turn on Begin Group.

•	To move the menu item up or down in relation to the existing menu items, click on Move Up or Move Down.

Inserting a fly-out submenu

To insert a fly-out sub-menu:

•	Click on the menu to which you want to add the new submenu (this can be a new or built-in menu). The Add Submenu button will become enabled.

•	Click on Add Submenu.

•	Enter the name of the new submenu in the Caption text box. Before the letter that you want to use as the menu's mnemonic (the underlined letter), type the '&' character. The mnemonic you choose should not be used by any other menu item or submenu in this menu.

•	If you want to place a separator before this submenu, turn on Begin Group.

•	To move the submenu up or down in relation to the existing menu items, click on Move Up or Move Down.

The new submenu is created with a single new menu item, which you can edit as described above.


Setting HoTMetaL options

To set HoTMetaL PRO options:

•	Choose Options... from the HoTMetaL PRO Tools menu.

This displays a dialog box with eight tabbed sections. You can set the following kinds of options:

•	General options

•	Options that configure the document window (View)

•	Source View for HTML source view options

•	Helper Applications

•	Default template, and file saving (File)

•	File opening and saving options

•	Spelling dictionaries

•	Server options

  More on this topic


General options

To set HoTMetaL PRO general options:

•	Choose Options... from the Tools menu.

•	 Click on the General tab.

This dialog box has several sections:

•	Enter user information: author name and organization.

•	Set the level of HoTMetaL PRO accessibility prompting: this feature helps you create documents that are readable by the widest possible audience, including users with physical impairments.

•	Add a menu item for the   an on-screen keyboard for users with mobility impairments, and position the VDK on the screen.

•	Specify the format for server-side image mapping files: this should correspond to the server type that your documents will reside on (you may need to obtain this information from your ISP or system administrator).

•	Miscellaneous options:

•	Show Tag tips (hover over a tag in Tags On view to see the set attributes).

•	Restore last open project.

•	Restore last open documents.

•	Map Microsoft Office 97 documents (whether the site management views will map links within Office 97 documents).

•	Rules checking always off (rules checking ensures correct HTML markup).

•	Show icons in menus.

To apply any changes made:

•	Click on the Apply or OK button.

•	Close the window by clicking on OK.


View options

To set HoTMetaL PRO viewing options:

•	Choose Options... from the Tools menu.

•	 Click on the View tab.

The following options can be set:

•	Show background images: enable or disable the display of background images.

•	Show inline images: show or hide images (IMG elements).

•	Show comments: show or hide HTML comments in the Tags On view. Comments are not displayed in the WYSIWYG view.

•	Open new documents in: choose which view documents that you create or open will be opened in: HTML Source, Tags On (the default), or WYSIWYG view.

•	Show head element: show or hide the contents of the HEAD element (document title, meta-information, etc.) in the Tags On view. The HEAD element is not displayed in the WYSIWYG view.

•	Size text to window: if you turn on this option, wrapped lines will adjust their length to fit the document window if the window is resized. If this option is turned off, wrapped lines will take their length from the global margins. Size text to window will cause a lot of reformatting, which may be slow for large documents.

•	Web View smooth scroll: if you turn on this option, your documents will scroll more smoothly in the Page Preview view.

The Tag Icons options let you change the appearance of tags:

•	Font - changes the font of the tag text. Choose a font from the drop-down list.

•	Size - changes the size of the tag text. Choose a size from the drop-down list.

•	Foreground - changes the color of the tag text. Click on the button to choose a color.

•	Background - changes the color of the tag background. Click on the button to choose a color.

To apply any changes made:

•	Click on the Apply or OK button.

•	Close the window by clicking on OK.


Source View options

You can change several display properties for the HTML Source view: fonts, colors, word wrapping, how tab characters are used, and line numbering. To set these properties:

•	Choose Options... from the Tools menu.

•	Click on the Source View tab in the Options dialog box.

 (These options do not change the contents of the document, but rather how it is displayed in HTML Source view. To configure how the text and markup are laid out, choose Customizations... in the Tools menu and click on the Source Layout tab.)

Fonts and colors

You can change the font and font size used in HTML Source view, and the colors used to display the following document components:

•	Ordinary text (non-markup)

•	Start-tags (including attribute names)

•	End-tags

•	Attributes (that is, attribute values)

•	Scripts (the contents of SCRIPT elements)

•	Comments

•	The DOCTYPE Declaration (located at the top of the document in HTML Source view).

These settings do not affect the way your document is displayed in a browser.

Set any of the following font options, which will apply to the entire HTML Source view:

•	Font – changes the font. Choose a font from the drop-down list.

•	Size – changes the font size. Choose a size from the drop-down list.

To change the colors used for ordinary text, set any of these options:

•	Foreground – changes the text color. Click on the button to select a color.

•	Background – changes the HTML Source view background color. Click on the button to select a color.

To change the colors of various components of the HTML markup:

•	Make sure HTML Colors is turned on.

•	Click on the buttons for any of the document components and choose a color.

To change the colors of various components of scripts embedded in the document via SCRIPT elements:

•	Make sure Script Colors is turned on.

•	Click on the buttons for any of the script components and choose a color.

Word wrapping

You can change word wrap options. This refers to how lines are displayed in the HTML Source window if they are longer than the current width of the window. The options are:

•	Off – turns word wrap off, so that the lines extend past the right edge of the window.

•	Break within words – long lines wrap onto the next line, and can be broken within words.

•	Break between words – long lines wrap onto the next line, and can be broken only between words. If you choose this option you can also choose to allow or disable line breaking inside tags.

If a line wraps, it does not cause the line number in HTML source view to increase.

Tab options

The Tab option lets you choose how tab characters will be treated in HTML Source view. Note that (except in PRE elements) a sequence of one or more tab or space characters will be collapsed to a single space if you switch to Tags On or WYSIWYG view and save the file; this is consistent with the rendering of 'white space' characters by most HTML browsers.

•	Enter a Size value between 1 and 16 to specify the number of characters between tab positions in HTML Source view.

•	By default, pressing Tab will cause HoTMetaL PRO to enter one or more characters to move the insertion point to the next tab position. You can turn on Use tab character to cause a tab character to be inserted instead.

•	If Auto-indent is turned on, new lines created by pressing Enter will be automatically indented at the same level as the previous line.

Line numbering

Line numbering enables you to hide or show line numbering in the HTML Source window.


Helper application options

You can change the default editor and viewer for a particular image type. These applications will be launched instead of the default application when you right-click on an image file of a particular type in HoTMetaL PRO, and choose Edit Image File or View Image File from the pop-up menu.

•	Choose Options... from the Tools menu.

•	Click on the Helper Apps tab.

•	Enter the file extension for the image type in the File Extension text box. If files of that type could have more than one extension (for example, .jpg and .jpeg), you will have to make a separate entry for each.

•	Click on Add New Type.

•	You can choose an editor, viewer, or both. Enter the locations and file names of of the desired applications in the Viewer and Editor text boxes (you can use the Choose... button to select them).

•	Click on OK.

To apply any changes made:

•	Click on the Apply or OK button.

•	Close the window by clicking on OK.

PhotoImpact SE and PhotoImpact Viewer SE are the default image editor and viewer, and will be used if no editor or viewer is associated with a specific image type. To change the default image editor and/or viewer, open the file Windows\hmpro6.ini and edit the following settings:

default_image_editor default_image_viewer


File options

To set file options:

•	Choose Options... from the Tools menu.

•	Click on the File tab.

You can choose a file that will be used as the default document template when you create a new file by clicking on the [image] toolbar button.

You can enter the default extension that will be used when files are saved without an extension.

You can cause HoTMetaL PRO to create a backup file when you save a file, and choose the backup file extension.

You can cause HoTMetaL PRO to save the current document automatically after a certain number of changes have been made, or after a certain number of minutes have elapsed. You can ask to be prompted before each auto-save.

To apply any changes made:

•	Click on the Apply or OK button.

•	Close the window by clicking on OK.


Spelling options

To set spelling options:

•	Choose Options... from the Tools menu.

•	Click on the Spelling tab.

You can specify up to 24 supplementary dictionaries, or lexicons, of specialized terminology for your specific field. Unlike user dictionaries, supplementary dictionaries cannot be modified during a spell checking session. Supplementary dictionaries are created and edited using Edit Dictionary, like other dictionaries.

To choose supplementary dictionaries:

•	For each dictionary that you wish to add, click on the Add button and select the file.

You can add your own list of words to a personal user dictionary. This is a way to avoid having the spell checker stop repeatedly for proper nouns and jargon that you use regularly.

You can load a different dictionary during a HoTMetaL PRO session, but only one user dictionary can be loaded at a time. The default user dictionary is the file user.dct, located in the lib\spell folder in the HoTMetaL PRO folder.

To select a default user dictionary:

•	Click on Choose... to select a user dictionary.

To apply any changes made:

•	Click on the Apply or OK button.

•	Close the window by clicking on OK.


Server options

By default, when you preview a document from HoTMetaL PRO, it submits a URL starting with file:///, followed by your drive name (for example, 'c|') to the browser. If your file is being preprocessed by another server, such as HoTMetaL Personal Server, that requires that URLs start with http://, you can use the Server options tab to change the URL that HoTMetaL PRO submits. In effect, this causes HoTMetaL PRO to do a find and replace operation, substituting part of the file:/// URL with a http:// URL.

If you are using HoTMetaL Personal Server, you need to set these options only if the defaults are not working for you. The default Server URL used with HoTMetaL Personal Server is  http://127.0.0.1/; if, when you attempt to preview, your browser cannot find this URL, the reason is probably that your site is using a proxy server. In this case you should enter 127.0.0.1 in your browser's Do not use proxy server list. This is done in the browser's proxy configuration' dialog. This dialog is accessed in different ways, depending on your browser:

•	In Netscape Communicator/Navigator 4.0, choose Preferences from the Edit menu; click on the Advanced category, then on Proxies; then click on the View... button next to Manual Proxy Configuration.

•	In Netscape Navigator 3.0, choose Network Preferences from the Options menu; click on the Proxies tab; then click on the View... button next to Manual Proxy Configuration.

•	In Microsoft Internet Explorer 4.0, choose Internet Options from the View menu; click on the Connection tab; then click on the Advanced... button in the Proxy Server section.

Once you have displayed this dialog, enter 127.0.0.1 in the list (if there is more than one entry in the list, use whichever separator the browser requires) and click on OK.

To set server options from in HoTMetaL PRO:

•	Choose Options... from the Tools menu.

If you want to choose a different server URL (for example, if your PC is on a local network and you want to refer to the server with your PC's own IP address):

•	Enter the server URL in the Server URL text box.

If you want to change the list of file extensions for which HoTMetaL PRO will make this substitution:

•	Click on the Server tab.

•	Turn on the Enable Mapping check box.

•	In the Map Extensions text box, enter the file extensions, separated by semi-colons (;), of the kinds of files for which you want the URLs changed.

If for some reason you need to specify both the 'find' and 'replace' parts of the substitution (normally this shouldn't be necessary):

•	Turn on the Override server mappings check box.

•	In the Map from text box, enter the part of the URL that needs to be changed. In the case of HoTMetaL Personal Server, enter your documents folder, as displayed in the WWW tab of the HoTMetaL Personal Server properties dialog.

•	In the Map site text box, enter the replacement text. For HoTMetaL Personal Server, enter URL used to access HoTMetaL Personal Server on your PC, as displayed in the Status tab of the HoTMetaL Personal Server properties dialog.

To apply any changes made:

•	Click on the Apply or OK button.

•	Close the window by clicking on OK.


Deploying customizations

Customizations can be applied to a single copy of HoTMetaL PRO or deployed for multiple installations. To customize HoTMetaL PRO for multiple installations, copy the customized files into the appropriate folders underneath the hmpro6\Customizable folder on the HoTMetaL PRO CD. See the section Deploying HoTMetaL customizations in the HoTMetaL Programmers' Guide in the online help for detailed information.

The following list summarizes the types of files that make up a customized version of HoTMetaL PRO:

•	Templates: when a user chooses the HoTMetaL PRO New... command, a tabbed template chooser dialog is displayed. The tabs in this dialog group the available templates, and correspond to sub-folders of the Template folder. Customizers can supply their own template folders and templates ( .htm files).

•	.ctm files: contain the customizations carried out by the HoTMetaL PRO Customization editor. The customizations for a DTD called dtdname.dtd are stored in dtdname.ctm. The .ctm file must reside in the same folder as the DTD (or rules file).

•	~.tbr files: contain information about toolbar and menu customizations carried out with the HoTMetaL PRO Toolbars... command. The customizations for a DTD called dtdname.dtd are stored in ~dtdname.tbr. The ~.tbr file must reside in the same folder as the DTD (or rules file).

•	.css files: contain display styles created with the cascading style sheet editor. The style sheet for a DTD called dtdname.dtd is dtdname.css. Style sheets must reside either in the Display folder or in the folder containing the DTD or rules file.

•	.mcr files: HoTMetaL PRO macro files. Macros are scripts that carry out specialized tasks; they are often attached to a custom toolbar buttons or menu items. The macro file for a DTD called dtdname.dtd is dtdname.mcr. Macro files reside in the Macros folder. Application-wide macros (not specific to a DTD) are stored in the file hotmetal.mcr.

•	Assets and asset templates: asset folders contain collections of files (often images, but also text files, text blocks, style sheets, etc.) that can be dragged and dropped into an HoTMetaL PRO document via the Asset Manager. See Customizing the Asset Manager in the HoTMetaL Programmers' Guide online help for more information. An asset template is a set of files containing scripts that control how files in a particular asset category are created and used. If you wish to enable users to create their own asset folders, you can provide asset templates in the customized HoTMetaL PRO. If not, these templates can be removed. Asset folders reside in the Assets folder; asset templates reside in the Asset Templates folder.

•	hmpro6.ini file: this file saves customizations carried out in the HoTMetaL PRO Options dialog. It resides in the top-level HoTMetaL PRO folder.

•	readme.doc file: customizers may wish to adapt SoftQuad's version of this file to suit their own customized version of HoTMetaL PRO. This file resides in the top-level HoTMetaL PRO folder.


Using macros

A macro is a sequence of actions that can be run as a unit. Macros can be associated with a shortcut key, toolbar button, or menu item. This is particularly useful when you have to carry out some repetitive task that doesn't have a built-in shortcut key or command, or when you want to run a script to carry out some special processing.

Macros can be stored in two files: the default HoTMetaL PRO macro file is Macros\hotmetal.mcr; in addition, you can have a macro file that is tied to the rules file used by the current document. For example, if the document uses the default HoTMetaL PRO rules file, hmpro6.rls, the macro file hmpro6.mcr will be loaded.

There are two ways to create macros:

•	You can record a sequence of HoTMetaL PRO actions into a macro .

•	You can use an editor to create a macro containing a script written in JScript, VBScript, or other suitable scripting language. Macros can be edited in HoTMetaL PRO or in a text editor. For more information, see the HoTMetaL Programmers' Guide manual: choose SoftQuad Applications from the Windows Programs menu, and then HoTMetaL Programmers' Guide.

See the section on customizing the toolbars and menus  for more information on associating a macro with a toolbar button or menu item.

  More on this topic


Recording macros

To record a macro:

•	Choose Record New Macro from the Tools menu or click on the [image] button in the Macros toolbar. This starts macro recording. The mouse cursor changes to a 'cassette' icon. The command will then toggle to Stop Recording... and the status bar will read Recording Macro.

•	Enter the sequence of actions that you want the macro to carry out. These actions will not only be recorded, they will also be applied to the current document as you perform them. There are some restrictions  on what can go into a macro.

•	When you're finished, choose Stop Recording... from the Tools menu or click on the [image] toolbar button. This command ends the macro.

Now you will get a dialog box in which you can select a descriptive name and a shortcut key for the macro. The shortcut key is the sequence of keystrokes that will run the macro.

A shortcut key can consist of any choice from the Key list (a letter, number, function key, or arrow key), alone or preceded by Ctrl, Alt, or  Shift in any combination. The key list contains only keys that have not been used with the selected combination of Ctrl, Alt, and  Shift; however, you can enter any key in the text box. If there is a conflict, you will be warned when you create the new macro. If you re-use one of HoTMetaL PRO's built-in shortcut keys as a macro shortcut key, its original functionality will be unavailable as long as that macro is loaded.

You can choose an image to represent the macro; if the macro is later associated with a toolbar button, the image will be displayed on the button. You can also pick an image later by choosing Macros... from the Tools menu, or you can choose the image when you create the toolbar button.

•	Enter a descriptive name for the macro.

•	Choose the shortcut key, if one is desired.

•	Choose whether to Make this macro available to the currently-loaded DTD-specific macros, or to the default HoTMetaL PRO macro set (Application).

•	If desired, click on Choose Image... to associate an image with the macro.

•	Click on OK.


Restrictions on macros

A macro should be self-contained, that is, its completion must not depend on any user input at the time the macro is run, such as typing in a dialog box or making a selection from a list. Therefore, there are some actions that cannot successfully be included in a macro. As a general guideline, if a macro involves any of the commands whose name ends in '...', that command should be completed somewhere in the macro. So, for example, you can create a macro that inserts a particular element, but you cannot create a macro that simply brings up the Insert Element dialog box.

Mouse clicks in the document window are ignored during macro recording. The first time you attempt to use the mouse to change the selection, HoTMetaL PRO will beep. The second time, you will get a message saying that you should use the cursor (arrow) keys to change the selection.

Not all commands can be recorded in a macro. A macro that was recorded in Normal or Tags On view can usually, but not always, be played back in the other view; you should test macros in both views before making them part of your production environment. Macros recorded in the Plain Text view are less likely to work in the other two views.

The following other actions cannot be recorded in a macro:

•	Actions that make a different document the 'active' document (for example, drag and drop between documents).

•	Setting table properties.

•	The Validate Document command.

•	Spell checking operations.

•	Most commands in the File and View menus.


Running a macro

There are several ways to run a macro.

•	Press its shortcut key.

•	Run it from the Macros toolbar.

•	If it has been assigned to a toolbar button or menu item , choose that control.

•	Run it from the Macros dialog.

To run a macro from the Macros toolbar:

•	If the Macros toolbar is not visible, right click on the toolbar area and choose Macros from the pop-up menu.

•	Choose a macro from the drop-down list.

•	Click on the [image] button to the left of the list of macros.

To run a macro from the Macros dialog:

•	Choose Macros... from the Tools menu, or click on the [image] button to the right of the list of macros.

•	Do one of:

•	Select the desired macro from the list.

•	Click on Run .
Or:

•	Double-click on the desired macro.

 You can run only one macro at a time.

The Macros dialog is dismissed when you run a macro.


Changing a macro shortcut key

To change the shortcut key associated with a macro:

•	Choose Macros... from the Tools menu. The Macros dialog appears and displays a list of currently loaded macros.

•	Select the macro that you want to change.

•	Choose a new shortcut key using the Ctrl, Alt, and Shift check boxes and the  Key list.

•	Click on Close.


Deleting a macro

To delete a macro from the list of loaded macros and from the corresponding macro file:

•	Choose Macros... in the Tools menu. This displays a dialog box with a list of currently-loaded macros.

•	Select the macro that you want to delete. (You can delete only one macro at a time.)

•	Click on Delete.

•	Click on Close.

Note: If you click on Cancel after deleting a macro, the macro file containing the macro will be reloaded to restore the deleted macro.


Loading macro files

The default HoTMetaL PRO macro file (Macros\hotmetal.mcr) will be loaded when HoTMetaL PRO starts up; rules file-specific macro files are loaded the first time a document using that rules file is opened. To reload the currently loaded macro files while HoTMetaL PRO is running, you can run a small script. This script also can be put in macro and assigned to a toolbar button or menu item.

Here is a macro that will refresh the currently-loaded macro files:

<MACRO name="Refresh Macros" key="" lang="JScript">

// SoftQuad Script Language JSCRIPT:

// Reload all macro files.

Application.RefreshMacros();

</MACRO>


Choosing the macro language

HoTMetaL PRO macro files are XML files that contain embedded code, which can be written in a number of programming languages. Macros that are recorded in HoTMetaL PRO are generated in either VBScript or JScript. You can choose which language is used by editing the xmetal.ini file:

•	Open xmetal.ini in the HoTMetaL PRO folder with a text editor.

•	 Set default_macro_language to vbscript or jscript. For example:

default_macro_language=vbscript

(If an existing setting exists, you can modify it; if none exists, create one.)

•	Save the file and restart HoTMetaL PRO.

The HoTMetaL PRO macros work the same no matter which language they are written in.


Shortcut keys

Shortcut keys for HoTMetaL PRO menu items are indicated on their respective menus. All menus, menu items, and dialog box controls are accessible by pressing the Alt key and the underlined letter (also called an 'access key' or 'mnemonic') associated with that control. HoTMetaL PRO also supports shortcut keys for window and dialog box navigation.

  More on this topic


File commands

These shortcut keys give you access to file manipulation commands.

Create a new blank document	Ctrl+N
Create a new document from a template	Ctrl+T
Open a document	Ctrl+O
Open a recently-opened document	Alt+F+number
Close a document	Ctrl+W, Ctrl+F4
Save a document	Ctrl+S
Save all documents	Ctrl+Q
Page Properties	Alt+Enter
Print	Ctrl+P
Quit HoTMetaL PRO	Alt+F4
Preview in a browser	Ctrl+M
Access online help	F1


Editing commands

These shortcut keys give you access to common editing operations.

Find and Replace	Ctrl+F
Find Next Forwards	F3
Find Next Backwards	Shift+F3
Find Selection Forwards	Ctrl+F3
Find Selection Backwards	Ctrl+Shift+F3
Undo an action	Ctrl+Z, Alt+Backspace
Redo an action	Ctrl+Y
Cancel an action	Esc
Spell checking	F7
Thesaurus	Shift+F7
Check HTML	F9
Select all	Ctrl+A
Remap links in a project	F5


Switching between views and display modes

These shortcut keys switch between HoTMetaL PRO 's four editing views, and display invisible characters, the styles dialog, and the Visual Dynamic Keyboard.

Toggle between WYSIWYG and Tags On views	Ctrl+Space
Switch to HTML Source view	Ctrl+Shift+H
Switch to Tags On view	Ctrl+Shift+O
Switch to WYSIWYG view	Ctrl+Shift+W
Switch to WYSIWYG-Frames view	Ctrl+Shift+F
Switch to Page Preview	Ctrl+Shift+V
Hide/show table grid.	Ctrl+Shift+Q


Inserting, deleting, and moving text and markup

These shortcut keys enable you to perform common editing operations on text and markup.

Delete one character to the left	Backspace
Delete one character to the right	Delete
Cut selection (copy to clipboard)	Ctrl+X, Shift+Delete
Delete selection (don't copy to clipboard)	Delete
Copy selection	Ctrl+C, Ctrl+Insert
Paste from clipboard	Ctrl+V, Shift+Insert
Insert a link	Ctrl+K
Insert a bookmark	Ctrl+G
Insert a break (BR element)	Shift+Enter
Insert non-breaking space (&nbsp;)	Ctrl+Shift+Space
Insert special character	Ctrl+Shift+E
Toggles the Attribute Inspector open/closed	Shift+F6
Shows and sets focus to the Attribute Inspector window	F6
Split element	Enter, Ctrl+Shift+P
Join to preceding	Backspace, Ctrl+Shift+J
Remove markup	Ctrl+Shift+D
Change element	Ctrl+Shift+L
Select element	Ctrl+Shift+T
Insert element	Ctrl+Shift+I
Insert selected element from floating Element List dialog, and dismiss dialog	Ctrl+Shift+Enter
Insert a comment	F8


Formatting characters

These shortcut keys perform character formatting in HoTMetaL PRO.

Increase the font size	Ctrl+Shift+>
Decrease the font size	Ctrl+Shift+<
Apply bold formatting	Ctrl+B
Apply an underline	Ctrl+U
Apply italic formatting	Ctrl+I
Create a new cascading style sheet in the document	Ctrl+Shift+B


Formatting paragraphs

These shortcut keys perform paragraph (block) formatting.

Center a paragraph or table cell	Ctrl+E
Left align a paragraph or table cell	Ctrl+L
Right align a paragraph or table cell	Ctrl+R
Demote selected list items to sub-list	Tab
Promote selected list items out of list	Shift+Tab


Moving around in a document

These shortcuts move the insertion point in the HoTMetaL PRO document window. See the next section for shortcuts for moving around in tables.

Scroll to insertion point or selection	F4
One character to the left	Left Arrow
One character to the right	Right Arrow
One word to the left	Ctrl+Left Arrow
One word to the right	Ctrl+Right Arrow
One paragraph up	Ctrl+Up Arrow
One paragraph down	Ctrl+Down Arrow
Up one line	Up Arrow
Down one line	Down Arrow
To the end of a line	End
To the beginning of a line	Home
Up one screen (scrolling)	Page Up
Down one screen (scrolling)	Page Down
To the end of a document	Ctrl+End
To the beginning of a document	Ctrl+Home
To the next frame or frameset in WYSIWYG-Frames view	Tab
To the previous frame or frameset in WYSIWYG-Frames view	Shift+Tab


Moving around in tables

These shortcuts move the insertion point in tables. See the previous section for shortcuts for moving around in the rest of the document window.

Next cell in a row	Tab, Right Arrow
Previous cell in a row	Shift+Tab, Left Arrow
First cell in a row	Alt+Home
Last cell in a row	Alt+End
First cell in a column	Alt+Page Up
Last cell in a column	Alt+Page Down
Previous row	Up Arrow
Next row	Down Arrow


Making and extending selections

These shortcut keys enable you to make or extend selections (highlighted text or markup).

One character to the right	Shift+Right Arrow
One character to the left	Shift+Left Arrow
To the end of a word	Ctrl+Shift+Right Arrow
To the beginning of a word	Ctrl+Shift+Left Arrow
To the end of a line	Shift+End
To the beginning of a line	Shift+Home
One line down	Shift+Down Arrow
One line up	Shift+Up Arrow
One paragraph down	Shift+Page Down
One paragraph up	Shift+Page Up
To the beginning of a document	Ctrl+Shift+Home
Select the current element	Ctrl+Shift+T
Select the entire document	Ctrl+A
Select the next table cell's contents	Tab
Select the preceding table cell's contents	Shift+Tab


Choosing menu items

These shortcuts enable you to choose commands from the HoTMetaL PRO menus.

Show the shortcut (right mouse) menu	Shift+F10
Make the menu bar active	F10
Show the program icon menu (on the program title bar)	Alt+Space
Select the next or previous command on the displayed menu or sub-menu	Down Arrow, Up Arrow
Select the menu to the left or right; or, with a sub-menu visible, switch between the main menu and the sub-menu	Left Arrow or Right Arrow
Close the visible menu and sub-menu at the same time	Alt
Close the visible menu; or, with a sub-menu visible, close the sub-menu only	Esc


Moving between windows and dialog boxes

These shortcuts enable you to move between windows, dialog boxes, and documents.

Switch to the next active program	Alt+Tab
Switch to the previous active program	Alt+Shift+Tab
Display the next document	Alt+Right arrow
Display the previous document	Alt+Left arrow
Show the Windows Start menu	Ctrl+Esc
Close the active document window	Ctrl+W
Return to document window	Shift+F6
Switch to the next document window	Ctrl+F6, Alt+Left Arrow
Switch to the previous document window	Ctrl+Shift+F6, Alt+Right Arrow
Toggle between the two most recent windows	Alt+F6
Cycle through document and modeless windows	Alt+Shift+F6


Navigating in a dialog box

These shortcut keys enable you to select and use dialog box controls (controls are groups of one or more related objects, such as a push button, or a group of radio buttons).

Switch to the next tab in a tabbed dialog box	Ctrl+Tab, Ctrl+Page Down
Switch to the previous tab in a tabbed dialog box	Ctrl+Shift+Tab, Ctrl+Page Up
Move to the next control	Tab
Move to the previous control	Shift+Tab
Move to control	Alt+underlined letter
Move between options in the selected drop-down list box	Arrow keys
Move between radio buttons in selected group	Arrow keys
Perform the action assigned to the selected button	Space, Enter
Turn selected check box on or off	Space
Turn any check box on or off	Alt+underlined letter
Move to an option a selected drop-down list box	First letter in option name
Open selected drop-down list box	Alt+Down Arrow
Close selected drop-down list box	Esc
Perform the action assigned to the default button in the dialog box (if no other push button is selected)	Enter
Select a folder in a folder list	Arrow keys
Update the files visible in the Open or Save As dialog box	F5
Cancel the command and close the dialog box	Esc


Glossary

This chapter defines many of the terms commonly heard when talking about the Web.

absolute URL

A URL that contains a scheme (for example, http) and a server address (for example, www.softquad.com.)

accessibility

HTML documents are said to be accessible if they have been optimized for use by:

1	Users with physical disabilities.

2	Users with a variety of hardware and software configurations.

 For example, in an accessible document all images should be accompanied by alternate text; this text can be interpreted by a document reader with a voice synthesizer, and displayed instead of the images by a text-only browser. In HoTMetaL PRO you can check a document's accessibility by choosing Check Accessibility in the Tools menu.

Accessible applications are those that provide alternate modes of operation for users with disabilities. HoTMetaL PRO provides the Visual Dynamic Keyboard for this purpose.

ActiveX

ActiveX™ controls are programs that can be referred to in various types of documents and applications under Microsoft Windows, including HTML documents. These programs perform some action in the browser window. OLE is the mechanism under Windows by which ActiveX controls can communicate with a browser. Not all browsers support this feature. In HoTMetaL PRO you can insert an ActiveX control by dragging and dropping it into the document window, or by choosing ActiveX Control... from the Insert menu. See also Java.

adaptive (assistive) technology

 The use of hardware and software to assist people who have difficulty accessing information systems using conventional methods. Examples of adaptive technology are screen readers and magnifiers for users with visual disabilities, and alternative keyboards (such as HoTMetaL PRO's Visual Dynamic Keyboard) and switches for people with little or no hand movement.

anchor

 An element in an HTML document that points to another file, or to a specific location in the current file or another file. When the document is displayed in a browser, clicking on a link causes the browser to display the document and/or location that it points to.

applet

 A program, written in the Java language, that is referred to in an HTML document. Applets perform some special processing in the browser window, such as drawing a picture or interacting with the user. In HoTMetaL PRO you can insert a an applet control by dragging and dropping it into the document window, or by choosing Java Applet... from the Insert menu. See also ActiveX.

attribute

A value that is associated with an element but is not part of the content of the element. Many formatting properties are represented by attributes: for example, background color, table width, and alignment; the URL part of an link is an attribute. HoTMetaL PRO has many specialized dialogs for editing these properties; you can also view and edit any attribute directly by choosing Attribute Inspector from the View menu.

block element

An element whose content is preceded and followed by line breaks. Choose Quick Styles... from the Tools menu to set this property for an element. Contrast with inline element.

bookmark

A specific, named location in a document that can be the target of a URL. A bookmark consists of an A element with its NAME attribute set to some text value (the bookmark name); bookmarks are created in HoTMetaL PRO using the Bookmark... command in the Insert menu.

broken link

A link to a file that does not exist or is not at the location indicated by the URL. The Broken Links command in the Project menu will find broken links in a project.

browser

A program that communicates with Web servers, and is used for retrieving and displaying documents from the World Wide Web or an intranet. Most browsers use a graphical interface to provide access to text, images, audio, and video. Compare this with editor. Some well-known browsers are  Lynx, Microsoft Internet Explorer, Mosaic, and Netscape Navigator.

cascading style sheet (CSS)

A way to specify document formatting, supported by certain browsers such as Netscape Communicator 4.0 and Microsoft Internet Explorer 4.0. Cascading style sheet information can be applied to a document via an external style sheet attached to the document; via an embedded style sheet contained on a STYLE element, or via a style rule attached to an element instance in its STYLE attribute. A cascading style sheet generally consists of one or more rules. Rules can associate an element, an element in a particular context, certain attributes, or a group of elements with settings for font size, indentation, margins, and many other formatting properties.

These style sheets are said to be 'cascading' because multiple style sheets can be applied to the same document, but there are cascading rules that specify which rules apply to a particular element. There are two levels of the CSS standard—CSS1 defines basic formatting and is most widely supported by browsers; CSS2 defines advanced properties and contexts. You can start the HoTMetaL PRO CSS editor by choosing CSS Styles... from the Format menu. See http://www.w3.org/ and the topic Styles in the online help for more information.

CERN

 The European Laboratory for Particle Physics near Geneva, Switzerland, where the World Wide Web was 'invented'. For more information, see http://www.cern.ch/

CGI

An acronym for Common Gateway Interface. This is a feature of Web servers that allows HTML clients such as browsers to communicate over the web with scripts installed on the server. HTML forms are often processed by such scripts. 'CGI scripts' can be written in any programming language that will run on the server; Perl is a common choice.

class; CLASS attribute

 HTML 4.0 supports the CLASS attribute for many HTML elements. In general, a set of elements can be given the same CLASS attribute value to mark them for special processing. A set of elements (possibly including different types of elements) that have the same CLASS value is referred to as a 'class'. Style properties can be applied to members of a class using cascading style sheets.

clickable image map

A clickable image map (or just image map) is an image that is divided into regions, each of them associated with a URL. Clicking in a region causes the file referred to by the associated URL to be accessed. There are two kinds of image maps: server-side (ISMAP) image maps require an external image map file that defines the regions in an image map and assigns them to URLs. Client-side (USEMAP) image maps accomplish the same thing using special elements in the document itself. Client-side image maps are easier to implement but are not supported by all browsers.

client

 In networking, any program that communicates with a server. An example of a client is a browser, which communicates with a Web server.

client-side image map

A type of image map for which the mapped regions and their associated URLs are defined in the document itself. Client-side image maps are not supported by all browsers. Also called a USEMAP.

current element

The element containing the insertion point or selection. If an entire element is selected, the current element is the element containing that element, not the selected element itself.

Customization editor

An HoTMetaL PRO component that enables you to customize the behavior of HoTMetaL PRO for each DTD that you use. Choose Customizations... from the Tools menu to display the Customization editor.

decor

In HoTMetaL PRO's Site Maker wizard, a set of graphical objects—buttons, lines, bullets—that have a similar visual theme, and which you can choose to give your site a consistent visual appearance.

design time control

An ActiveX control that assists a document creator in designing various objects that can be inserted in an HTML document.

DNS

 Domain Name System. This is the way in which the network turns a host or Internet domain (for example, softquad.com) into an Internet IP address for use with TCP/IP. Internet applications use both domain names and IP addresses to connect to other computers on the Internet.

DTD

A set of declarations, written in a formal notation defined in the XML and SGML standards, that define the structure of a set of documents. Among other things, a DTD declares all of the element names that can appear in a document, the hierarchy in which they can be arranged, the type of content they can have, and which attributes they can have.

editor

A program, such as HoTMetaL PRO, used to create, or change the content of, HTML documents. Compare this with browser.

element

Elements are the structural building blocks of HTML documents. Blocks of text in HTML documents are contained in elements according to their function in the document: for example, headings, lists, paragraphs, and links are all surrounded by specific elements. Many HoTMetaL PRO commands and features insert elements; the most general way is to choose Element... in the Insert menu.

extranet

1	An intranet that is linked to the intranet(s) of one or more other organizations.

2	An intranet that provides limited access from the outside world.

firewall

 In networking, a firewall is a computer that prevents intruders from accessing all the computers on a network if they manage to break into one computer someplace. The firewall usually sits between your inside network and the outside Internet.

'followed by' element

Using the HoTMetaL PRO Customization editor, you can configure HoTMetaL PRO to insert a specific element when you press Enter at the end of the current element. For example, a paragraph could be inserted when you press Enter at the end of a title element. Also called a 'next element'.

form

A group of graphical controls in an HTML document:  text boxes,  radio buttons, drop-down lists, check boxes, etc. A user browsing the document can enter information in a form and use the browser to submit it to an e-mail address or a program on a  Web server. In HoTMetaL PRO, you can insert form objects using the Form menu or the Forms toolbar. See also CGI.

frame

A sub-window of a browser window; each frame can display a different document. In HoTMetaL PRO, you can display and edit frames in the WYSIWYG-Frames view.

FTP

 The File Transfer Protocol; one of the schemes that can be specified in a  URL. This has traditionally been one of the most important of the network services. You can use this standard communications protocol to pick up a copy of a file from a remote computer, provided that you can connect to that computer (with TCP/IP, for example).

GIF

A common graphics format used in HTML documents. This format is owned by CompuServe. See also JPEG and PNG.

gopher

 A line-mode Internet protocol that predates the Web. Web browsers can normally communicate with gopher servers.

home page

The top-level document of a site associated with a person, company, organization, or subject, usually containing introductory information and links to other relevant pages.

hot image; hot spot; hot text

Hot text is text in a hypertext document (such as an HTML document) that is a link to some other file; a hot image is an image that is a link to some other file; a hot spot is hot text, or a region in an image map.

HTML

The HyperText Markup Language. This is the usual format for documents that are 'published' on the Web. HTML is an application of SGML.

HTML Source editing

HoTMetaL PRO provides an editing window, the HTML Source view, in which you can edit the HTML source ('code') of the document directly, as a text file. This window provides visual cues to identify the various components of the HTML source. HoTMetaL PRO also provides WYSIWYG, Tags On (structural), and frame editing windows.

HTTP, http

The HyperText Transfer Protocol. This protocol is used to transfer HTML documents over the network, between a  Web server and an HTML browser, while you wait. The HTTP protocol is implemented by Web servers.

hypertext

Text that contains links to other documents or specific locations in documents. HTML documents are examples of hypertext.

ICADD

 The International Committee for Accessible Document Design. Techniques created by ICADD and documented in ISO 12083 specify how to automatically transform  SGML files (including HTML files) into input to a Braille, large print, or synthesized voice system. See also accessibility.

ID (identifier)

 The ID attribute was added to most HTML elements in HTML 3.0. It is used for constructing cascading style sheets: an ID attribute uniquely identifies a single instance of an element so that a style rule can be constructed for that element in a cascading style sheet. An ID must start with a letter, followed by letters and digits; it is not case-sensitive.

IETF

 The Internet Engineering Task Force, responsible for the technical management of the Internet. The IETF coordinates the development of the HTTP standard.

image map; image map file

An image map is an image that is divided into regions, each of them associated with a URL. Clicking in a region causes the file referred to by the associated URL to be accessed.  There are two kinds of image maps: server-side (ISMAP) image maps require an external image map file that defines the regions in an image map and assigns them to URLs. Client-side (USEMAP) image maps accomplish the same thing using special elements in the document itself. Client-side image maps are easier for document authors to implement, but are not supported by all browsers.

HoTMetaL PRO has a built-in image map editor, available from the Image Mapping toolbar when an image is selected in the document window.

inline element

An element that does not have line break before or after the element contents. Choose Quick Styles... from the Tools menu to set this property for an element. Contrast with block element.

interlaced image

An image that is first displayed in the browser at a low resolution, and then in successively higher resolutions, until the whole image has been downloaded. This is sometimes referred to as progressive display. GIF, JPEG, and PNG images can be interlaced. Not all browsers support this feature.

Internet Explorer

A popular browser developed by Microsoft Corporation.

intranet

An 'internal net', whose pages are available only on a local server. An organization can use Web technology, such as browsers, servers, and editors to share information among its members or employees, but not make this information accessible to the public over the WWW. See also extranet.

IP address

An IP address is the specific address, in numerical form, of a computer on the Internet. Each IP address is unique to that computer, and consists of four numbers separated by periods.

ISP

An Internet Service Provider (ISP) provides access to the Internet for a fee, usually through a dialup connection.

ISMAP

Another name for image map.

ISO

 The International Organization for Standardization ('ISO' is not an exact acronym).

ISO 8859-1 character set

  This is the character set for 'special' or 'accented' characters that is generally in use for HTML documents. This character set is also called 'ISO Latin 1'. It includes characters required for most western European languages. This character set is one of several in the ISO 8859 standard: others support, for example, Eastern European languages and Cyrillic-based languages such as Russian. HTML now specifies the much broader Unicode standard.

Java

Java is a programming environment that operates in conjunction with certain browsers. It lets you refer to and run programs, called applets, from an HTML document. Applets perform some special processing in the browser window, such as drawing a picture or interacting with the user. The Java programming language is a platform-independent object-oriented language, with some similarities to C and C++. See also ActiveX.

JavaScript

JavaScript is a programming language that is loosely based on Java. Instead of being referred to in an HTML document, as Java applets are, JavaScript code is usually embedded in the document itself, using the SCRIPT element.

JPEG

An image format that is commonly supported by Web browsers. JPEG is an acronym for Joint Photographic Expert Group. See also GIF and PNG.

layout

1	The visual arrangement of components—text, images, tables, etc.—on a printed or virtual page.

2	In HoTMetaL PRO's Site Maker wizard, a choice of structure for the pages in the site that you're creating.

line-mode browser

 An HTML browser that can be used on a 'dumb terminal' such as a VT100 or a PC with communications software. The most common is  Lynx.

link

 An element in an HTML document that points to a document, or to a specific location in a document, using a URL. Clicking on a link in a browser causes the browser to display the document and/or location that it points to. You can insert a link in HoTMetaL PRO by choosing Link... from the Insert menu.

Lynx

 A common line-mode HTML browser. Lynx can be used over a slow dial-up line or if you don't have a windowing system.

macro

A sequence of HoTMetaL PRO actions or script commands that can be run as a unit via a keyboard shortcut, a toolbar button, or a menu item. Macros can be recorded from within HoTMetaL PRO, or created by inserting scripting code into a macro file.

mailto

A scheme that causes a browser to send a form to a particular e-mail address, or generate a mail-editing window.

markup

Special codes in a document that specify how parts of it are to be processed by an application. In a word-processor file, markup specifies how the text is to be formatted; in an HTML document, the markup (the tags) specifies the text's structural function (heading, title, paragraph, etc.).

marquee

 A piece of text that scrolls across a browser document window. Not all browsers support marquees.

meta-information

 Information about a document that is read by a Web or intranet server. It could be indexing information for search purposes, document creation and expiry information, etc. Meta data is contained in META tags in the HEAD element.

MIME

 The Multipurpose Internet Mail Extensions (RFC 1510): extensions that allow e-mail messages to contain audio, video, and multiple files. It is also the format that Web servers and browsers use to transfer files. The MIME content type of a file tells a browser how to process it. The content type for HTML files is 'text/html'.

Miva

A programming language that can be embedded in Web pages. Miva uses an XML-based syntax; Miva tags correspond to common programming language constructs such as assignment statements, conditional expressions, loops, and input/output statements. Miva also supports special database, email, and commerce functionality.

Miva is a 'server-side' programming language: Miva programs are run on the server, not by the browser. Miva is implemented by HoTMetaL Application Server (which runs as a CGI process or NSAPI module) and HoTMetaL Personal Server, a PC-based server that is mainly used as a development platform. HoTMetaL PRO can edit documents containing Miva code; Miva tags are available from the Miva tab of the Element List dialog.

Mosaic

 The first widely-used HTML browser, developed at the NCSA.

NCSA

 The National Center for Supercomputing Applications, located at the University of Illinois at Urbana-Champaign, Illinois. The NCSA is an (indirectly) U.S. government-funded body that exists to try and make powerful computers more accessible to researchers. Mosaic was originally written at the NCSA.

Netscape Navigator, Netscape Communicator

Popular web browsers developed by Netscape Communications Corporation.

OLE

  The mechanism under Windows by which ActiveX controls can communicate with a browser.

orphan files

Files in a HoTMetaL PRO project that cannot be reached by following links that start in the project's home page. The Orphan Files command in the Project menu can locate orphan files for you.

page

A single HTML document (which can be longer than one screen).

PNG

Portable Network Graphics; a graphics format supported by some browsers. PNG is a 'lossless' format; some of its advantages are better (24-bit) color support, compression, and anti-aliasing and transparency capabilities.

Pockets

User-defined sets of files that are useful for managing projects. You can create Pockets based on a variety of criteria, such as search results, files with broken links, orphaned files (files without any links to them), etc. Once you have created a Pocket with a certain type of file in it, you can then delete, copy, or rename listed files all together, rather than trying to find each and every file in the project display.

pretty printing

Saving an HTML file in such a way that it is easily readable by a human; for example, indenting nested lists to reflect their nesting structure. You can configure pretty printing options in the Source Layout tab of the HoTMetaL PRO Options dialog.

processing instruction

An XML and SGML markup construct that contains an instruction that is not interpreted as part of the document's content, but instead is interpreted by an application that is processing the file.

progressive display

How an interlaced image is displayed by a browser: first at a low resolution, and then in successively higher resolutions, until the whole image has been downloaded.

project

A defined group of files, consisting of linked HTML files, auxiliary HoTMetaL PRO files, and linked files in other formats. Projects are displayed and managed in HoTMetaL PRO.

proxy server

A proxy server is a computer that is directly connected to the Internet, allowing multiple users on a network to access the Internet. It may also be part of a firewall, protecting the network from unauthorized access. The proxy server then acts as an agent (or proxy), to make the connection. To you, inside the firewall, it pretends to be the server that you're attempting to connect to; on the outside, it pretends to be the client, and talks to the real server, thus letting you talk to a server outside the firewall (or vice versa). See also socks.

publishing

Publishing a HoTMetaL PRO project means moving your documents to a server so that other users can have access to your project. The publishing component of HoTMetaL PRO lets you publish some or all of your files to a local or remote server. Once you have specified the destination server for your documents, the publishing component will automatically log in to the server and deliver the files to the location you specified.

relative URL

A URL that is missing some information (such as the scheme or network location), which a browser is expected to inherit from the URL of the document that contains the relative URL.

required element

An element's subelement that the DTD has declared must be present in order for the document to be valid.

scheme

The part of a URL that tells an HTML  client, such as a browser, which access method to use to retrieve the file specified in the  URL. Common schemes are http, file, ftp, and mailto.

screen magnifier

 Screen magnification software helps people with visual impairments to use computers by enlarging the image on the screen. The magnification program runs simultaneously with the computer's operating system and applications. An area of the screen, selected using the mouse or cursor keys, is enlarged to fill the whole screen or displayed in a magnifying window.

screen reader

 A software package that enables people to use computers without having to see the monitor. The screen reader uses a sound card or speech synthesizer to speak the text on the screen and the user's keystrokes. Because screen readers produce a stream of spoken text, the user usually receives a top to bottom, line by line account of a page. This means that graphics, even those including words, are missed and columns are often misread.

server

A networked program that responds to requests from local or remote computers for HTML files. You give the Web server a file name (in the form of a  URL) and it gives you back the file (which can be in any format, text or binary) over the same network connection.

SGML

 An international standard for describing the markup of structured documents. The basic idea behind SGML is that information can be made independent of particular hardware and software. This is done by storing all documents as text-only files (with references to documents in other formats, such as graphics, when required), and using markup that describes the structure of documents, rather than their physical appearance. SGML is described by the ISO 8879 standard (1986). HTML is an application (a particular instance) of SGML.

Site Maker

A component of HoTMetaL PRO; a wizard that lets you design a site by supplying some information about you and/or your company, specifying the purpose(s) of the site, and choosing a decor and layout.

socks

 A protocol used to connect to servers outside a firewall. Not all firewalls support socks, in which case a proxy server is used instead.

style sheet

A cascading style sheet—way to specify document formatting, supported by certain browsers such as Netscape Communicator 4.0 and Microsoft Internet Explorer 4.0. Cascading style sheet information can be applied to a document via an external style sheet attached to the document; via an embedded style sheet contained on a STYLE element, or via a style rule attached to an element instance in its STYLE attribute. A cascading style sheet generally consists of one or more rules. Rules can associate an element, an element in a particular context, certain attributes, or a group of elements with settings for font size, indentation, margins, and many other formatting properties.

These style sheets are said to be 'cascading' because multiple style sheets can be applied to the same document, but there are cascading rules that specify which rules apply to a particular element. There are two levels of the CSS standard—CSS1 defines basic formatting and is most widely supported browsers; CSS2 defines advanced properties and contexts. See http://www.w3.org/ and the topic Styles for more information.

synchronization

Copying a set of files from one folder (such as a local project folder) to another folder (such as a folder on a Web server).

tags

An element in an HTML file begins with a start-tag (for example, '<PRE>') and (usually) ends with an end-tag (for example, </PRE>). In HoTMetaL PRO's Tags On view, tags are represented by tag icons at the beginning and end of an element; you can see the tags directly in the HTML Source view. See also markup.

Tags On editing

HoTMetaL PRO provides an editing window for structured editing. In this window tags are represented by tag icons at the beginning and end of an element. HoTMetaL PRO also has WYSIWYG,  HTML Source and frame editing windows.

TCP/IP

 Transmission Control Protocol/Internet Protocol. This is the low-level protocol used by much of the Internet. It's really two protocols; IP packets are sent over a network that itself uses TCP. Other common variations include SLIP (pronounced 'slip'; Serial Line/Internet Protocol), and PPP (Point to Point Protocol).

transparent image

An image in which one color (usually the dominant background color) is designated as 'transparent', so that when the image is displayed in a browser, the image's background is colored with the browser's background color. The desired effect is an image that does not have a rectangular boundary.

Unicode

 A standard for electronically encoding the characters of many of the scripts used to write the world's languages, as well as special symbols such as mathematical symbols. Unicode attempts to make it easier to create computer applications that can process multiple scripts and/or whose interface (menu commands, dialog box labels, and so forth) can be adapted to various scripts. To this end Unicode uses a 'fixed-width' character encoding in which all characters are represented by 16 bits, and no special 'control' codes are used. Unicode is the character encoding specified by HTML. For more information, see http://www.unicode.org/

URI

 Uniform Resource Identifier. This is a generic name for any of a class of ways of identifying resources on the Internet. Three types of  URIs are URCs (Uniform Resource Classification), URLs, and URNs (Uniform Resource Name). Implementations of URCs and URNs are still in an experimental stage. The basic idea is that a resource (for example, a document) is identified by a URN, a kind of 'public identifier' in the SGML sense. The URN is resolved into a URC, which is a collection of information about the resource (it could include, for example, the price of obtaining the resource, and one or more URLs).

URL

Uniform Resource Locator. A URL is the address of a file, written in a format that can be interpreted by a Web server, which then retrieves the file. A URL can contain a scheme that tells how the file is to be retrieved, a server on which the file resides, a path and/or filename, and a bookmark name referring to a specific location in the file. For most files on Web servers, the scheme  http is used.

USEMAP

Another name for a client-side image map.

valid document

An XML or SGML document is valid if it is well-formed and if it conforms to the rules in the DTD associated with the file. Some conformance conditions are: all elements, attribute values, and entities in the document must be declared in the DTD; all subelements of an element must match that element's content model; all IDREF attributes must match an ID attribute in the document; and all required attributes must be present.

Visual Dynamic Keyboard (VDK)

An on-screen keyboard provided with HoTMetaL PRO that enables users with mobility impairments to use HoTMetaL PRO and other Windows applications. A variety of hardware can be used with the VDK, instead of a conventional keyboard and mouse. See also accessibility.

W3C

The World Wide Web Consortium, an industry association for the development of World Wide Web technologies. This organization is sponsored by the Massachusetts Institute of Technology (USA), Institut National de Recherche en Informatique et en Automatique (INRIA) (France), and Keio University (Japan). For more information, see http://www.w3.org/.

Web, the

An informal name for the World Wide Web.

Web object

 HTML code that makes up an image, script, or piece of dynamic HTML. These items are objects that can be used to make up the content of a Web page.

Web page

Another term for a page.

Website

A group of linked pages on the World Wide Web.

Web server

A networked program that responds to requests from local or remote computers for HTML files. You give the Web server a file name (in the form of a URL) and it gives you back the file (which can be in any format, text or binary) over the same network connection.

Web View

The Web View shows the link structure of your HoTMetaL PRO project as if it were sliding on the surface of a sphere. The Web View starts from a root page: all links go 'outwards' from the home page. The various colors used to display the links give information about the type of link.

workspace

In HoTMetaL PRO, a workspace saves state information about the current project, open files, window layout, and options.

World Wide Web

This is a generic term for the collection of Web servers and browsers that literally spans the world. Usually abbreviated WWW.

WWW

The World Wide Web.

WYSIWYG editing

What You See Is What You Get. HoTMetaL PRO's WYSIWYG view displays HTML documents as they might appear in a browser. HoTMetaL PRO also provides Tags On (structural), HTML Source,  and frame editing views.

XML

The eXtensible Markup Language. It is designed to be an easy-to-implement subset of SGML, for use over the Internet. XML is an initiative of the W3C; for more information, see http://www.w3.org/.

Yuri Rubinsky Insight Foundation (YRIF)

A non-profit organization dedicated to making information more accessible to people with disabilities. YRIF was founded in memory of Yuri Rubinsky (1952-1996), co-founder and former president of SoftQuad. For more information, see http://www.yuri.org/.


Glossary

This chapter defines many of the terms commonly heard when talking about the Web.


absolute URL

A URL that contains a scheme (for example, http) and a server address (for example, www.softquad.com.)


accessibility

HTML documents are said to be accessible if they have been optimized for use by:

1	Users with physical disabilities.

2	Users with a variety of hardware and software configurations.

 For example, in an accessible document all images should be accompanied by alternate text; this text can be interpreted by a document reader with a voice synthesizer, and displayed instead of the images by a text-only browser. In HoTMetaL PRO you can check a document's accessibility by choosing Check Accessibility in the Tools menu.

Accessible applications are those that provide alternate modes of operation for users with disabilities. HoTMetaL PRO provides the Visual Dynamic Keyboard for this purpose.


ActiveX

ActiveX™ controls are programs that can be referred to in various types of documents and applications under Microsoft Windows, including HTML documents. These programs perform some action in the browser window. OLE is the mechanism under Windows by which ActiveX controls can communicate with a browser. Not all browsers support this feature. In HoTMetaL PRO you can insert an ActiveX control by dragging and dropping it into the document window, or by choosing ActiveX Control... from the Insert menu. See also Java.


adaptive (assistive) technology

The use of hardware and software to assist people who have difficulty accessing information systems using conventional methods. Examples of adaptive technology are screen readers and magnifiers for users with visual disabilities, and alternative keyboards (such as HoTMetaL PRO's Visual Dynamic Keyboard) and switches for people with little or no hand movement.


anchor

 An element in an HTML document that points to another file, or to a specific location in the current file or another file. When the document is displayed in a browser, clicking on a link causes the browser to display the document and/or location that it points to.


applet

 A program, written in the Java language, that is referred to in an HTML document. Applets perform some special processing in the browser window, such as drawing a picture or interacting with the user. In HoTMetaL PRO you can insert a an applet control by dragging and dropping it into the document window, or by choosing Java Applet... from the Insert menu. See also ActiveX.


attribute

A value that is associated with an element but is not part of the content of the element. Many formatting properties are represented by attributes: for example, background color, table width, and alignment; the URL part of an link is an attribute. HoTMetaL PRO has many specialized dialogs for editing these properties; you can also view and edit any attribute directly by choosing Attribute Inspector from the View menu.


block element

An element whose content is preceded and followed by line breaks. Choose Quick Styles... from the Tools menu to set this property for an element. Contrast with inline element.


bookmark

A specific, named location in a document that can be the target of a URL. A bookmark consists of an A element with its NAME attribute set to some text value (the bookmark name); bookmarks are created in HoTMetaL PRO using the Bookmark... command in the Insert menu.


broken link

A link to a file that does not exist or is not at the location indicated by the URL. The Broken Links command in the Project menu will find broken links in a project.


browser

A program that communicates with Web servers, and is used for retrieving and displaying documents from the World Wide Web or an intranet. Most browsers use a graphical interface to provide access to text, images, audio, and video. Compare this with editor. Some well-known browsers are  Lynx, Microsoft Internet Explorer, Mosaic, and Netscape Navigator.


cascading style sheet (CSS)

A way to specify document formatting, supported by certain browsers such as Netscape Communicator 4.0 and Microsoft Internet Explorer 4.0. Cascading style sheet information can be applied to a document via an external style sheet attached to the document; via an embedded style sheet contained on a STYLE element, or via a style rule attached to an element instance in its STYLE attribute. A cascading style sheet generally consists of one or more rules. Rules can associate an element, an element in a particular context, certain attributes, or a group of elements with settings for font size, indentation, margins, and many other formatting properties.

These style sheets are said to be 'cascading' because multiple style sheets can be applied to the same document, but there are cascading rules that specify which rules apply to a particular element. There are two levels of the CSS standard—CSS1 defines basic formatting and is most widely supported by browsers; CSS2 defines advanced properties and contexts. You can start the HoTMetaL PRO CSS editor by choosing CSS Styles... from the Format menu. See http://www.w3.org/ and the topic Styles in the online help for more information.


CERN

The European Laboratory for Particle Physics near Geneva, Switzerland, where the World Wide Web was 'invented'. For more information, see http://www.cern.ch/


CGI

An acronym for Common Gateway Interface. This is a feature of Web servers that allows HTML clients such as browsers to communicate over the web with scripts installed on the server. HTML forms are often processed by such scripts. 'CGI scripts' can be written in any programming language that will run on the server; Perl is a common choice.


class; CLASS attribute

HTML 4.0 supports the CLASS attribute for many HTML elements. In general, a set of elements can be given the same CLASS attribute value to mark them for special processing. A set of elements (possibly including different types of elements) that have the same CLASS value is referred to as a 'class'. Style properties can be applied to members of a class using cascading style sheets.


clickable image map

A clickable image map (or just image map) is an image that is divided into regions, each of them associated with a URL. Clicking in a region causes the file referred to by the associated URL to be accessed. There are two kinds of image maps: server-side (ISMAP) image maps require an external image map file that defines the regions in an image map and assigns them to URLs. Client-side (USEMAP) image maps accomplish the same thing using special elements in the document itself. Client-side image maps are easier to implement but are not supported by all browsers.


client

In networking, any program that communicates with a server. An example of a client is a browser, which communicates with a Web server.


client-side image map

A type of image map for which the mapped regions and their associated URLs are defined in the document itself. Client-side image maps are not supported by all browsers. Also called a USEMAP.


current element

The element containing the insertion point or selection. If an entire element is selected, the current element is the element containing that element, not the selected element itself.


Customization editor

An HoTMetaL PRO component that enables you to customize the behavior of HoTMetaL PRO for each DTD that you use. Choose Customizations... from the Tools menu to display the Customization editor.


decor

In HoTMetaL PRO's Site Maker wizard, a set of graphical objects—buttons, lines, bullets—that have a similar visual theme, and which you can choose to give your site a consistent visual appearance.


design time control

An ActiveX control that assists a document creator in designing various objects that can be inserted in an HTML document.


DNS

Domain Name System. This is the way in which the network turns a host or Internet domain (for example, softquad.com) into an Internet IP address for use with TCP/IP. Internet applications use both domain names and IP addresses to connect to other computers on the Internet.


DTD

A set of declarations, written in a formal notation defined in the XML and SGML standards, that define the structure of a set of documents. Among other things, a DTD declares all of the element names that can appear in a document, the hierarchy in which they can be arranged, the type of content they can have, and which attributes they can have.


editor

A program, such as HoTMetaL PRO, used to create, or change the content of, HTML documents. Compare this with browser.


element

Elements are the structural building blocks of HTML documents. Blocks of text in HTML documents are contained in elements according to their function in the document: for example, headings, lists, paragraphs, and links are all surrounded by specific elements. Many HoTMetaL PRO commands and features insert elements; the most general way is to choose Element... in the Insert menu.


extranet

1	An intranet that is linked to the intranet(s) of one or more other organizations.

2	An intranet that provides limited access from the outside world.


firewall

 In networking, a firewall is a computer that prevents intruders from accessing all the computers on a network if they manage to break into one computer someplace. The firewall usually sits between your inside network and the outside Internet.


'followed by' element

Using the HoTMetaL PRO Customization editor, you can configure HoTMetaL PRO to insert a specific element when you press Enter at the end of the current element. For example, a paragraph could be inserted when you press Enter at the end of a title element. Also called a 'next element'.


form

A group of graphical controls in an HTML document:  text boxes,  radio buttons, drop-down lists, check boxes, etc. A user browsing the document can enter information in a form and use the browser to submit it to an e-mail address or a program on a  Web server. In HoTMetaL PRO, you can insert form objects using the Form menu or the Forms toolbar. See also CGI.


frame

A sub-window of a browser window; each frame can display a different document. In HoTMetaL PRO, you can display and edit frames in the WYSIWYG-Frames view.


FTP

 The File Transfer Protocol; one of the schemes that can be specified in a  URL. This has traditionally been one of the most important of the network services. You can use this standard communications protocol to pick up a copy of a file from a remote computer, provided that you can connect to that computer (with TCP/IP, for example).


GIF

A common graphics format used in HTML documents. This format is owned by CompuServe. See also JPEG and PNG.


gopher

A line-mode Internet protocol that predates the Web. Web browsers can normally communicate with gopher servers.


home page

The top-level document of a site associated with a person, company, organization, or subject, usually containing introductory information and links to other relevant pages.


hot image; hot spot; hot text

Hot text is text in a hypertext document (such as an HTML document) that is a link to some other file; a hot image is an image that is a link to some other file; a hot spot is hot text, or a region in an image map.


HTML

The HyperText Markup Language. This is the usual format for documents that are 'published' on the Web. HTML is an application of SGML.


HTML Source editing

HoTMetaL PRO provides an editing window, the HTML Source view, in which you can edit the HTML source ('code') of the document directly, as a text file. This window provides visual cues to identify the various components of the HTML source. HoTMetaL PRO also provides WYSIWYG, Tags On (structural), and frame editing windows.


HTTP, http

The HyperText Transfer Protocol. This protocol is used to transfer HTML documents over the network, between a  Web server and an HTML browser, while you wait. The HTTP protocol is implemented by Web servers.


hypertext

Text that contains links to other documents or specific locations in documents. HTML documents are examples of hypertext.


ICADD

The International Committee for Accessible Document Design. Techniques created by ICADD and documented in ISO 12083 specify how to automatically transform  SGML files (including HTML files) into input to a Braille, large print, or synthesized voice system. See also accessibility.


ID (identifier)

The ID attribute was added to most HTML elements in HTML 3.0. It is used for constructing cascading style sheets: an ID attribute uniquely identifies a single instance of an element so that a style rule can be constructed for that element in a cascading style sheet. An ID must start with a letter, followed by letters and digits; it is not case-sensitive.


IETF

The Internet Engineering Task Force, responsible for the technical management of the Internet. The IETF coordinates the development of the HTTP standard.


image map; image map file

An image map is an image that is divided into regions, each of them associated with a URL. Clicking in a region causes the file referred to by the associated URL to be accessed.  There are two kinds of image maps: server-side (ISMAP) image maps require an external image map file that defines the regions in an image map and assigns them to URLs. Client-side (USEMAP) image maps accomplish the same thing using special elements in the document itself. Client-side image maps are easier for document authors to implement, but are not supported by all browsers.

HoTMetaL PRO has a built-in image map editor, available from the Image Mapping toolbar when an image is selected in the document window.


inline element

An element that does not have line break before or after the element contents. Choose Quick Styles... from the Tools menu to set this property for an element. Contrast with block element.


interlaced image

An image that is first displayed in the browser at a low resolution, and then in successively higher resolutions, until the whole image has been downloaded. This is sometimes referred to as progressive display. GIF, JPEG, and PNG images can be interlaced. Not all browsers support this feature.


Internet Explorer

A popular browser developed by Microsoft Corporation.


intranet

An 'internal net', whose pages are available only on a local server. An organization can use Web technology, such as browsers, servers, and editors to share information among its members or employees, but not make this information accessible to the public over the WWW. See also extranet.


IP address

An IP address is the specific address, in numerical form, of a computer on the Internet. Each IP address is unique to that computer, and consists of four numbers separated by periods.


ISP

An Internet Service Provider (ISP) provides access to the Internet for a fee, usually through a dialup connection.


ISMAP

Another name for image map.


ISO

The International Organization for Standardization ('ISO' is not an exact acronym).


ISO 8859-1 character set

 This is the character set for 'special' or 'accented' characters that is generally in use for HTML documents. This character set is also called 'ISO Latin 1'. It includes characters required for most western European languages. This character set is one of several in the ISO 8859 standard: others support, for example, Eastern European languages and Cyrillic-based languages such as Russian. HTML now specifies the much broader Unicode standard.


Java

Java is a programming environment that operates in conjunction with certain browsers. It lets you refer to and run programs, called applets, from an HTML document. Applets perform some special processing in the browser window, such as drawing a picture or interacting with the user. The Java programming language is a platform-independent object-oriented language, with some similarities to C and C++. See also ActiveX.


JavaScript

JavaScript is a programming language that is loosely based on Java. Instead of being referred to in an HTML document, as Java applets are, JavaScript code is usually embedded in the document itself, using the SCRIPT element.


JPEG

An image format that is commonly supported by Web browsers. JPEG is an acronym for Joint Photographic Expert Group. See also GIF and PNG.


layout

1	The visual arrangement of components—text, images, tables, etc.—on a printed or virtual page.

2	In HoTMetaL PRO's Site Maker wizard, a choice of structure for the pages in the site that you're creating.


line-mode browser

An HTML browser that can be used on a 'dumb terminal' such as a VT100 or a PC with communications software. The most common is  Lynx.


link

 An element in an HTML document that points to a document, or to a specific location in a document, using a URL. Clicking on a link in a browser causes the browser to display the document and/or location that it points to. You can insert a link in HoTMetaL PRO by choosing Link... from the Insert menu.


Lynx

A common line-mode HTML browser. Lynx can be used over a slow dial-up line or if you don't have a windowing system.


macro

A sequence of HoTMetaL PRO actions or script commands that can be run as a unit via a keyboard shortcut, a toolbar button, or a menu item. Macros can be recorded from within HoTMetaL PRO, or created by inserting scripting code into a macro file.


mailto

A scheme that causes a browser to send a form to a particular e-mail address, or generate a mail-editing window.


markup

Special codes in a document that specify how parts of it are to be processed by an application. In a word-processor file, markup specifies how the text is to be formatted; in an HTML document, the markup (the tags) specifies the text's structural function (heading, title, paragraph, etc.).


marquee

A piece of text that scrolls across a browser document window. Not all browsers support marquees.


meta-information

Information about a document that is read by a Web or intranet server. It could be indexing information for search purposes, document creation and expiry information, etc. Meta data is contained in META tags in the HEAD element.


MIME

The Multipurpose Internet Mail Extensions (RFC 1510): extensions that allow e-mail messages to contain audio, video, and multiple files. It is also the format that Web servers and browsers use to transfer files. The MIME content type of a file tells a browser how to process it. The content type for HTML files is 'text/html'.


Miva

A programming language that can be embedded in Web pages. Miva uses an XML-based syntax; Miva tags correspond to common programming language constructs such as assignment statements, conditional expressions, loops, and input/output statements. Miva also supports special database, email, and commerce functionality.

Miva is a 'server-side' programming language: Miva programs are run on the server, not by the browser. Miva is implemented by HoTMetaL Application Server (which runs as a CGI process or NSAPI module) and HoTMetaL Personal Server, a PC-based server that is mainly used as a development platform. HoTMetaL PRO can edit documents containing Miva code; Miva tags are available from the Miva tab of the Element List dialog.


Mosaic

The first widely-used HTML browser, developed at the NCSA.


NCSA

The National Center for Supercomputing Applications, located at the University of Illinois at Urbana-Champaign, Illinois. The NCSA is an (indirectly) U.S. government-funded body that exists to try and make powerful computers more accessible to researchers. Mosaic was originally written at the NCSA.


Netscape Navigator, Netscape Communicator

Popular web browsers developed by Netscape Communications Corporation.


OLE

The mechanism under Windows by which ActiveX controls can communicate with a browser.


orphan files

Files in a HoTMetaL PRO project that cannot be reached by following links that start in the project's home page. The Orphan Files command in the Project menu can locate orphan files for you.


page

A single HTML document (which can be longer than one screen).


PNG

Portable Network Graphics; a graphics format supported by some browsers. PNG is a 'lossless' format; some of its advantages are better (24-bit) color support, compression, and anti-aliasing and transparency capabilities.


Pockets

User-defined sets of files that are useful for managing projects. You can create Pockets based on a variety of criteria, such as search results, files with broken links, orphaned files (files without any links to them), etc. Once you have created a Pocket with a certain type of file in it, you can then delete, copy, or rename listed files all together, rather than trying to find each and every file in the project display.


pretty printing

Saving an HTML file in such a way that it is easily readable by a human; for example, indenting nested lists to reflect their nesting structure. You can configure pretty printing options in the Source Layout tab of the HoTMetaL PRO Options dialog.


processing instruction

An XML and SGML markup construct that contains an instruction that is not interpreted as part of the document's content, but instead is interpreted by an application that is processing the file.


progressive display

How an interlaced image is displayed by a browser: first at a low resolution, and then in successively higher resolutions, until the whole image has been downloaded.


project

A defined group of files, consisting of linked HTML files, auxiliary HoTMetaL PRO files, and linked files in other formats. Projects are displayed and managed in HoTMetaL PRO.


proxy server

A proxy server is a computer that is directly connected to the Internet, allowing multiple users on a network to access the Internet. It may also be part of a firewall, protecting the network from unauthorized access. The proxy server then acts as an agent (or proxy), to make the connection. To you, inside the firewall, it pretends to be the server that you're attempting to connect to; on the outside, it pretends to be the client, and talks to the real server, thus letting you talk to a server outside the firewall (or vice versa). See also socks.


publishing

Publishing a HoTMetaL PRO project means moving your documents to a server so that other users can have access to your project. The publishing component of HoTMetaL PRO lets you publish some or all of your files to a local or remote server. Once you have specified the destination server for your documents, the publishing component will automatically log in to the server and deliver the files to the location you specified.


relative URL

A URL that is missing some information (such as the scheme or network location), which a browser is expected to inherit from the URL of the document that contains the relative URL.


required element

An element's subelement that the DTD has declared must be present in order for the document to be valid.


scheme

The part of a URL that tells an HTML  client, such as a browser, which access method to use to retrieve the file specified in the  URL. Common schemes are http, file, ftp, and mailto.


screen magnifier

Screen magnification software helps people with visual impairments to use computers by enlarging the image on the screen. The magnification program runs simultaneously with the computer's operating system and applications. An area of the screen, selected using the mouse or cursor keys, is enlarged to fill the whole screen or displayed in a magnifying window.


screen reader

A software package that enables people to use computers without having to see the monitor. The screen reader uses a sound card or speech synthesizer to speak the text on the screen and the user's keystrokes. Because screen readers produce a stream of spoken text, the user usually receives a top to bottom, line by line account of a page. This means that graphics, even those including words, are missed and columns are often misread.


server

A networked program that responds to requests from local or remote computers for HTML files. You give the Web server a file name (in the form of a  URL) and it gives you back the file (which can be in any format, text or binary) over the same network connection.


SGML

An international standard for describing the markup of structured documents. The basic idea behind SGML is that information can be made independent of particular hardware and software. This is done by storing all documents as text-only files (with references to documents in other formats, such as graphics, when required), and using markup that describes the structure of documents, rather than their physical appearance. SGML is described by the ISO 8879 standard (1986). HTML is an application (a particular instance) of SGML.


Site Maker

A component of HoTMetaL PRO; a wizard that lets you design a site by supplying some information about you and/or your company, specifying the purpose(s) of the site, and choosing a decor and layout.


socks

A protocol used to connect to servers outside a firewall. Not all firewalls support socks, in which case a proxy server is used instead.


style sheet

A cascading style sheet—way to specify document formatting, supported by certain browsers such as Netscape Communicator 4.0 and Microsoft Internet Explorer 4.0. Cascading style sheet information can be applied to a document via an external style sheet attached to the document; via an embedded style sheet contained on a STYLE element, or via a style rule attached to an element instance in its STYLE attribute. A cascading style sheet generally consists of one or more rules. Rules can associate an element, an element in a particular context, certain attributes, or a group of elements with settings for font size, indentation, margins, and many other formatting properties.

These style sheets are said to be 'cascading' because multiple style sheets can be applied to the same document, but there are cascading rules that specify which rules apply to a particular element. There are two levels of the CSS standard—CSS1 defines basic formatting and is most widely supported browsers; CSS2 defines advanced properties and contexts. See http://www.w3.org/ and the topic Styles for more information.


synchronization

Copying a set of files from one folder (such as a local project folder) to another folder (such as a folder on a Web server).


tags

An element in an HTML file begins with a start-tag (for example, '<PRE>') and (usually) ends with an end-tag (for example, </PRE>). In HoTMetaL PRO's Tags On view, tags are represented by tag icons at the beginning and end of an element; you can see the tags directly in the HTML Source view. See also markup.


Tags On editing

HoTMetaL PRO provides an editing window for structured editing. In this window tags are represented by tag icons at the beginning and end of an element. HoTMetaL PRO also has WYSIWYG,  HTML Source and frame editing windows.


TCP/IP

Transmission Control Protocol/Internet Protocol. This is the low-level protocol used by much of the Internet. It's really two protocols; IP packets are sent over a network that itself uses TCP. Other common variations include SLIP (pronounced 'slip'; Serial Line/Internet Protocol), and PPP (Point to Point Protocol).


transparent image

An image in which one color (usually the dominant background color) is designated as 'transparent', so that when the image is displayed in a browser, the image's background is colored with the browser's background color. The desired effect is an image that does not have a rectangular boundary.


Unicode

A standard for electronically encoding the characters of many of the scripts used to write the world's languages, as well as special symbols such as mathematical symbols. Unicode attempts to make it easier to create computer applications that can process multiple scripts and/or whose interface (menu commands, dialog box labels, and so forth) can be adapted to various scripts. To this end Unicode uses a 'fixed-width' character encoding in which all characters are represented by 16 bits, and no special 'control' codes are used. Unicode is the character encoding specified by HTML. For more information, see http://www.unicode.org/


URI

Uniform Resource Identifier. This is a generic name for any of a class of ways of identifying resources on the Internet. Three types of  URIs are URCs (Uniform Resource Classification), URLs, and URNs (Uniform Resource Name). Implementations of URCs and URNs are still in an experimental stage. The basic idea is that a resource (for example, a document) is identified by a URN, a kind of 'public identifier' in the SGML sense. The URN is resolved into a URC, which is a collection of information about the resource (it could include, for example, the price of obtaining the resource, and one or more URLs).


URL

Uniform Resource Locator. A URL is the address of a file, written in a format that can be interpreted by a Web server, which then retrieves the file. A URL can contain a scheme that tells how the file is to be retrieved, a server on which the file resides, a path and/or filename, and a bookmark name referring to a specific location in the file. For most files on Web servers, the scheme  http is used.


USEMAP

Another name for a client-side image map.


valid document

An XML or SGML document is valid if it is well-formed and if it conforms to the rules in the DTD associated with the file. Some conformance conditions are: all elements, attribute values, and entities in the document must be declared in the DTD; all subelements of an element must match that element's content model; all IDREF attributes must match an ID attribute in the document; and all required attributes must be present.


Visual Dynamic Keyboard (VDK)

An on-screen keyboard provided with HoTMetaL PRO that enables users with mobility impairments to use HoTMetaL PRO and other Windows applications. A variety of hardware can be used with the VDK, instead of a conventional keyboard and mouse. See also accessibility.


W3C

The World Wide Web Consortium, an industry association for the development of World Wide Web technologies. This organization is sponsored by the Massachusetts Institute of Technology (USA), Institut National de Recherche en Informatique et en Automatique (INRIA) (France), and Keio University (Japan). For more information, see http://www.w3.org/.


Web, the

An informal name for the World Wide Web.


Web object

 HTML code that makes up an image, script, or piece of dynamic HTML. These items are objects that can be used to make up the content of a Web page.


Web page

Another term for a page.


Website

A group of linked pages on the World Wide Web.


Web server

A networked program that responds to requests from local or remote computers for HTML files. You give the Web server a file name (in the form of a URL) and it gives you back the file (which can be in any format, text or binary) over the same network connection.


Web View

The Web View shows the link structure of your HoTMetaL PRO project as if it were sliding on the surface of a sphere. The Web View starts from a root page: all links go 'outwards' from the home page. The various colors used to display the links give information about the type of link.


workspace

In HoTMetaL PRO, a workspace saves state information about the current project, open files, window layout, and options.


World Wide Web

This is a generic term for the collection of Web servers and browsers that literally spans the world. Usually abbreviated WWW.


WWW

The World Wide Web.


WYSIWYG editing

What You See Is What You Get. HoTMetaL PRO's WYSIWYG view displays HTML documents as they might appear in a browser. HoTMetaL PRO also provides Tags On (structural), HTML Source,  and frame editing views.


XML

The eXtensible Markup Language. It is designed to be an easy-to-implement subset of SGML, for use over the Internet. XML is an initiative of the W3C; for more information, see http://www.w3.org/.


Yuri Rubinsky Insight Foundation (YRIF)

A non-profit organization dedicated to making information more accessible to people with disabilities. YRIF was founded in memory of Yuri Rubinsky (1952-1996), co-founder and former president of SoftQuad. For more information, see http://www.yuri.org/.